vue父组件和子组件之间的传值及方法调用

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