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 运行该项目
刚刚我们创建的是vue基于webpack工具的一个模板项目，对于webpack和热加载这些不熟悉的同学不必在意，我们现在不会过多关注webpack的，不过建议对vue有兴趣的同学还是去了解一下webpack，它也算是vue开发中的一个必备工具
接着我们进入Demo，首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西，此时的App.vue应为这样
App.png
一.父组件向子组件传值
1.创建子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props，然后创建一个名为message的属性
child.png
3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值
App2.png
4.保存修改的文件，查看浏览器
browser.png
5.我们依然可以对message的值进行v-bind动态绑定
App3.png
此时浏览器中
browser2.png
父组件向子组件传值成功
总结一下：
- 子组件在props中创建一个属性，用以接收父组件传过来的值
- 父组件中注册子组件
- 在子组件标签中添加子组件props中创建的属性
- 把需要传给子组件的值赋给该属性
二.子组件向父组件传值
1.在子组件中创建一个按钮，给按钮绑定一个点击事件
Child2.png
2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数
Child3.png
3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法
App4.png
4.保存修改的文件，在浏览器中点击按钮
扫描二维码关注公众号，回复：
186491 查看本文章
browser3.png
子组件向父组件传值成功
总结一下：
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
- 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了
如下所示：
|
1
2
3
4
5
6
|
<
FormItem
label
=
"上传头像"
prop
=
"image"
>
<
uploadImg
:width
=
"150"
:height
=
"150"
:name
=
"'avatar'"
size
=
"150px*150px"
ref
=
"avatar"
></
uploadImg
>
</
FormItem
>
<
FormItem
label
=
"上传营业执照"
prop
=
"businessLicence"
>
<
uploadImg
:width
=
"350"
:height
=
"200"
:name
=
"'businessLicence'"
size
=
"350px*200px"
ref
=
"businessLicence"
></
uploadImg
>
</
FormItem
>
|
自己写了个上传图片的子组件，父组件需要获取到子组件上传的图片地址，
方法一：给相应的子组件加ref
父组件在最后提交的时候获取thi.$ref.avatar.相应数据即可，因为在这里才能保证图片已经上传，否则如果图片没上传，拿到的值一定为空。
方法二：$emit()
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
/*
子组件
*/
<
template
>
<
input
type
=
'file'
@
change
=
"changeUrl"
/>
</
template
>
<
script
>
export default {
methods: {
changeUrl(e) {
this.$emit('changeUrl', e.currentTarget.files[0].path)
}
}
}
</
script
>
/*
父组件
*/
<
template
>
<
FormItem
label
=
"上传营业执照"
prop
=
"businessLicence"
>
<
uploadImg
:width
=
"350"
:height
=
"200"
:name
=
"'license'"
size
=
"350px*200px"
@
changeUrl
=
"getUrl"
></
uploadImg
>
</
FormItem
>
</
template
>
<
script
>
export default {
methods: {
getUrl(path) {
//这个就是你要的path,并且会双向绑定
}
}
}
</
script
>
|