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中通过默认的自定义事件名 传递要修改的值

效果：