vue父子之间传值

父向子传值

Vue是一个轻量级的渐进式框架，对于它的一些特性和优点在此就不做赘述，本篇文章主要来探讨一下Vue子父组件通信的问题

首先我们先搭好开发环境，我们首先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦)

环境搭建步骤：

• 打开git ，运行 npm install --global vue-cli 这是安装vue的命令行
• vue init webpack vue-demo 这是vue基于webpack的模板项目
• cd vue-demo 进入vue-demo文件夹
• npm install 安装package.json中依赖的node_modules
• npm run dev 运行该项目

接着我们进入Demo，首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西，此时的App.vue应为这样

1.创建子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props，然后创建一个名为message的属性

3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值

 这个是固定传值

这个是动态传值

 

 总结如下:

1  子组件中在props中创建一个属性,用于接收父组件传过来的值
2   父组件中注册子组件
3   在子组件标签中添加props中的属性
4   把需要传给子组件的值赋值给该属性

子组件向父组件传值

1  在子组件创建一个按钮,给该按钮绑定一个点击事件

child.png

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

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

 

总结
1  子组件需要以某种方式例如点击事件的方法来触发一个自定义事件
2   将需要传的值作为$emit的第二个参数,该值将作为实参传递给响应自定义事件的方法
3   在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听