vue父组件和子组件之间的传值及方法调用
1、父组件向子组件传值
<!-- haha在vue实例的data中定义并设置默认值 -->
<my-component :myData='haha'></my-component>
2、子组件接受父组件传的值
通过props来接受, 如下:
props: ['myData']
3、父组件向子组件传方法
<!-- aaFunc在vue实例的methods中 -->
<!-- 不带参数 -->
<my-component :myFunc='aaFunc'></my-component>
<!-- 带参数 -->
<my-component :myFunc='aaFunc(args)'></my-component>
4、子组件调用父组件的方法
子组件中通过$emit来调用父组件的方法,
// 不带参数
this.$emit('myFunc')
// 带参数
this.$emit('myFunc', '22')
5、父组件调用子组件的方法或属性
通过在父组件上设置ref属性,来为组件定义一个名字,然后使用$refs来获取该父组件并调用它里面的方法和属性,如下:
<!-- aaFunc在vue实例的methods中 -->
<!-- 使用组件时,用ref定义组件的名字 -->
<my-component ref='myComponent'></my-component>
在父组件文件中调用子组件的方法和属性:
// 调用myComponent组件的aaFunc方法
this.$refs.myComponent.aaFunc()
// 调用myComponent组件的hh属性
this.$refs.myComponent.hh
6、子组件中更新属性时同步到父组件中
可以使用.sync修饰符(详情可见vue修饰符总结及积累一节),如下:
<!-- haha在vue实例的data中定义并设置默认值 -->
<my-component :myData.sync='haha'></my-component>
子组件文件中:
// 接收
props: ['myData']
// 修改myData并同步更新到父组件
this.$emit('update:myData', '22')
vue项目下props传进去的数据,生命周期勾子函数包括watch不触发的解决办法
7,对象监听
data () {
return {
val1: '',
value1: '',
obj: {
val2: ''
},
value2: ''
}
},
watch: {
val1 (val, oval) {
this.value1 = val
},
'obj': {
handler (val, oval) {
this.value2 = val.val2
},
deep: true
}
},
解释:handler是watch的高级用法,里面有一个属性 deep,默认值是 false,代表是否深度监听, 还有一个属性 immediate,默认值也是 false ,但immediate:true代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。deep深度监听会影响性能; 两者可以同时存在;
应用
watch: {
mydata: {
handler(val, oval) {
if (val.dialogueid) {
this.messageinitdata();//父组件传的值变化调用方法
}
},
deep: true,
},
},
参考文档
https://blog.csdn.net/qq_40652539/article/details/84958416
https://blog.csdn.net/weixin_40755688/article/details/86719530