本文目录
- vue父组件中调用子组件函数的方法?
- vue为什么子组件可以使用emit?
- vue如何多次调用调用自身组件,只是数据不一样?
- vuex中子组件如何获取数据?
- Vueprop传一个对象给子组件,怎么避免子组件修改数据污染父组件?
- vue for循环组件可以watch监听吗?
vue父组件中调用子组件函数的方法?
<!--编辑会员--><editUser ref=\editUser\ v-on:childMethod=\parentMethod\></editUser>12<script>import editUser from './Edit.vue';export default {data() {return {}},methods:{parentMethod(param){console.log('parent');},}}</script>頭條萊垍
vue为什么子组件可以使用emit?
因为emit是针对子组件特定的一个方法,子组件通过$emit 触发父组件的自定义事件。頭條萊垍
emit方法至少需要一个参数,并且这个参数的名字是父组件调用子组件传递进去的方法,方法名称必须一样。emit具体使用代码如下:萊垍頭條
<div><OrderShip @updateOrderList="updateList"></OrderShip></div>垍頭條萊
这是父组件调用子组件,例子中的updateOrderList是父组件传递给子组件的方法,那么在子组件中使用emit方法的参数也必须是updateOrderList垍頭條萊
vue如何多次调用调用自身组件,只是数据不一样?
组件的递归调用,注意递归判断var test = Vue.extend({萊垍頭條
name: 'test',萊垍頭條
template: '萊垍頭條
' + // 递归地调用它自己'' + '垍頭條萊
'})萊垍頭條
其实你可以考虑用Router来实现,只不过相当于访问同样的详情页而已。 萊垍頭條
vuex中子组件如何获取数据?
vue中子组件获取数据有三种,第一种1.this.$emit ,子传父2.this.$children属性,this.$children返回的是数组;萊垍頭條
第二种方法,通过this.$refs获取组件;萊垍頭條
第三种方法,this.$parent获取父组件数据,this.$parent返回的是对象,this.$children返回的数组。垍頭條萊
Vueprop传一个对象给子组件,怎么避免子组件修改数据污染父组件?
你不修改不就行了。。。頭條萊垍
如果是需要修改的话。重新定义一次。頭條萊垍
比如我之前遇到过也是编辑状态。prop传过来只是为了显示初始数据萊垍頭條
props:{萊垍頭條
data:{萊垍頭條
//为什么要有默认参数呢。我也不知道。反正我觉得还是写上的好萊垍頭條
default(){頭條萊垍
return {萊垍頭條
name : ''萊垍頭條
}萊垍頭條
}條萊垍頭
}垍頭條萊
},萊垍頭條
data(){垍頭條萊
let name = this.data.name萊垍頭條
return {萊垍頭條
formData : {萊垍頭條
name萊垍頭條
}條萊垍頭
}萊垍頭條
} 頭條萊垍
vue for循环组件可以watch监听吗?
可以监听的條萊垍頭
watch是一个对象,这个对象的键是需要观察的表达式,值可以是直接方法、方法名、包含选项的对象等等,Vue实例会在实例化时调用$watch(), 遍历watch对象的每一个属性,并且观察。萊垍頭條
watch {萊垍頭條
{ [key: string]: string | Function | Object | Array }萊垍頭條
}萊垍頭條
代码示例:萊垍頭條
// 我们用vue的v-model指令来验证下watch对象的功能垍頭條萊
<div>萊垍頭條
<p>{{msg}}</p >萊垍頭條
<input v-model=\msg\>頭條萊垍
</div>萊垍頭條
// pattern1 directly method value萊垍頭條
watch {萊垍頭條
// msg1 为表达式, function(oldVal, newVal)为匿名函数,作为回调函数萊垍頭條
msg1: function (newVal, oldVal) {萊垍頭條
console.log(\oldVal is: \ + oldVal + \ newVal is: \ + newVal);萊垍頭條
}萊垍頭條
}萊垍頭條
在双向绑定输入框输入一些值后,看console里watch对象的效果:萊垍頭條
// 初始值为init,输入init1之后的console输出萊垍頭條
oldVal is: init newVal is: init1條萊垍頭