父子组件互相传值

一、父组件向子组件传值

父 ————》子

方法一：通过props

• 父组件

1. 步骤
   （1）将子组件导入父组件中；
   （2）使用子组件，并在子组件标签中通过“ : ” + 需要传递的数据

• 子组件：

1. 步骤
   （1）使用props属性来接收父组件传递过来的数据，数据名要和父组件保持一致

注意
（1）父组件的数据发生了改变，子组件会自动跟着变
（2）子组件不能直接修改父组件传递过来的props，会报错
（3）父组件给子组件传递的是一个对象的话，子组件可以修改这个对象，因为对象是引用类型

方法二：通过$parent

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

• 父组件

• 子组件

二、子组件向父组件传值

子 ————》父

方法一：通过$emit

说明：
（1）父组件内，给组件@自定义事件="父methods函数"
（2）子组件内，恰当时机 this.$emit("上面自定义事件名,值)

• 父组件

• 子组件

子传父其他方式链接

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

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

使用技巧：
（1）父组件内 ,在组件上使用 v-model（以下俩句代码是v-model的原理）
传递 :value="Show"
修改 @input="Show= event 就是子组件传递过来的值
（2）子组件内, 在props中默认用value接收传递过来的值；在methods中通过默认的自定义事件名 传递要修改的值

• 父组件

• 子组件

注意事项：

1. 一个组件上只能使用一次 v-model
2. 如果需要修改 v-model 的规则名称，可以通过子组件的 model 属性来配置修改
   实例如下：
   在子组件的model中进行修改 父组件不用变

• 修改的子组件

疑问: 如果有多个数据需要实现类似于 v-model 的效果什么实现呐？
答案：.sync修饰符

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

使用技巧：
父组件内 ,在组件使用.sync
子组件内,在适当的时机this.$emit('update:props属性名'，值)

• 父组件

• 子组件