#前言

我们在开发vue项目的时候经常会遇到一些,组件之间的数据传递,有父组件向子组件传值,子组件想父组件传值

## 父组件传递参数给子组件

父组件通过import + component写入子组件，然后v-bind绑定数据，子组件通过props接收

##父子组件传值的思想

• 父：自定义属性名 + 数据（要传递）=> v-bind:value="数据"
• 子：props ["父组件上的自定义属性名"] => 进行数据接收

##子组件 Child.vue

要点

• 在 props 数组里面是父组件上的自定义属性名
• 在 template 里面进行数据接收

Father.vue

要点：

• 引入 child.vue 文件，并为其创建一个变量
• 在 components 里面写出这个变量
• 在 template 里面需要注册子组件
• 在data里面创建一个msg作为我们需要传递的变量
• 如果传递的值是一个变量的话,我们就需要使用v-bind 或者 : 进行动态绑定否则不会实现,并且不会报错,只是不会实现效果

保存修改文件,查看浏览器,就完成了父组件向子组件传递数据

总结

• 父组件中通过 import - components - < /> 三部曲 注册子组件
• 子组件在 props 对象中创建一个属性 prop
• 父组件在注册的子组件标签中添加 prop 属性，即 prop="value"
• 父组件可以通过 v-bind:prop（:prop）实现数据双向绑定

子组件传递参数给父组件

Child.vue

1,首先我们需要给子组件一个按钮,让后给这个按钮一个点击事件

2,在响应该点击事件的函数中使用 $emit 来触发一个自定义事件，并传递一个参数

父组件 Father.veu

3,在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

4,保存修改的文件，在浏览器中点击按钮

5,点击按钮,完成传值

总结

• 子组件中需要以某种方式的方法来触发一个自定义事件（例如点击事件）
• 子组件使用 this.$emit 方法，第一个参数为父组件定义的方法名称 event，第二个参数为传递的值
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听（event="Event"），Event(data) 可以接收传过来的参数