vue父子组件传值的方法总结

一，父向子传值

1.通过props

使用技巧：

• 子组件内, props定义变量, 在子组件使用变量

• 父组件内, 使用子组件, 属性方式给props变量传值

注意事项：

• 父组件的数据发生了改变，子组件会自动跟着变

• 子组件不能直接修改父组件传递过来的props，会报错， props是只读的

• 子组件修改，不通知父级，会造成数据不一致

• PS：父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新

总结:

说明了从父到子的数据流向是单向数据流

props的值不能重新赋值, 对象引用关系属性值改变, 互相影响

2.通过$parent  

使用技巧：

• 子组件，通过this.$parent获取到 父组件的值或者方法 并可以直接对其值进行修改或对其方法直接调用

二，子向父传值

1.通过$emit  

使用技巧：

• 父组件内, 给组件@自定义事件="父methods函数"

• 子组件内, 恰当时机this.$emit('自定义事件名', 值)

三，当父向子传值  子组件又要修改父组件的值时 用到的方法

1.通过v-model  （一个组件只能使用一次） 

使用技巧：

• 父组件内 ,在组件上使用 v-model（以下俩句代码是v-model的原理）

     传递    :value="Show"

    修改   @input="Show= $event"    这个$event 就是子组件传递过来的值

• 子组件内, 在props中默认用value接收传递过来的值   ；在methods中通过默认的自定义事件名 传递要修改的值

 效果：

注意事项：

1.一个组件上只能使用一次 v-model， 

2.如果需要修改 v-model 的规则名称，可以通过子组件的 model 属性来配置修改

实例如下：

在子组件的model中进行修改    父组件不用变

  疑问: 如果有多个数据需要实现类似于 v-model 的效果什么实现呐？

  答案：.sync修饰符

2.使用属性的 .sync 修饰符 

使用技巧：

• 父组件内 ,在组件使用.sync

• 子组件内,在适当的时机this.$emit('update:props属性名'，值)