Vue中的父组件和子组件，以及两者通信

140 阅读 0 评论 93 点赞

我是靠谱客的博主无聊蜻蜓，这篇文章主要介绍Vue中的父组件和子组件，以及两者通信，现在分享给大家，希望可以做个参考。

通常情况下，组件只分为全局组件和局部组件两种，但事实上，经常可以看到在一个组件构造器中注册了另外一个组件。

一.父组件与子组件

复制代码

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
<script>
const cpn-c1 = Vue.extend({ // 子组件
template: `
<div>
<h1>我是标题1</h1>
<p>我是内容，哈哈哈</p>
</div>
`
})
const cpn-c2 = Vue.extend({ // 父组件
template: `
<div>
<h1>我是标题2</h1>
<p>我是内容，呵呵呵</p>
</div>
`
components: { //在cpn-c2内部注册组件cpn1
cpn1: cpn-c1
}
})
const app = new Vue({
el: "#app",
components: {
cpn2: cpn-c2
}
})
</script>

二.父子组件之间的通信

我们知道，子组件是不能引用父组件或者Vue实例中的数据的
但是开发中，往往一些数据确实需要从上层传递到下层

比如在一个页面中，我们从服务器请求到了很多的数据
其中一部分数据，并非是整个页面的大组件来展示的，而是需要下面的子组件来展示
这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）

1.如何进行父子组件间的通信？

通过props向子组件传递数据
通过事件emit向父组件传递数据

2.props基本用法，父传子

在组件中，使用选项props来声明需要从父级接收到的数据
props的值有两种方式
1）方式一：字符串数组，数组中的字符串就是传递时的名称，为一个变量
2）方式二：对象，对象可以设置传递时的类型，也可以设置默认值，注意当类型为Object/Array时，默认值必须为函数形式

复制代码

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
	<div id="app">
<cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
<ul>
<li v-for='item in cmovies'>{{item}}</li>
</ul>
<p>{{cmessage}}</p>
</div>
</template>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1.子组件
const cpn = {
template: "#cpn",
props:["cmovies","cmessage"], // 1.字符串数组形式
props:{
// 2.对象形式
cmovies:Array,
cmessage:String,
}
cmovies:{
type:Array,
default(){
return[]
// 类型为对象/数组时，default为函数类型，默认值表示如果未给cmovie传值，输出的内容
}
cmessage:{
type:String,
default:"aaaaaaa",
required:true // 表示必须要给cmessage传值，否则会报错
}
}
}
//2.(父组件)
var app = new Vue({
el: "#app",
data:{
movies:['海王','海贼王'],
message:"你好啊",
},
components:{
'cpn': cpn
}
})
</script>

注意：v-bind后面不允许出现驼峰标识，要写成c-movies的形式

3.子传父，$emit基本用法

子传父时，需要用自定义事件来完成
何时需要自定义时间呢？
1）当子组件需要向父组件传递数据时，就要用到自定义组件了
2）v-on不仅可以监听DOM事件，也可以用于组件间的自定义事件
自定义事件流程：
1）在子组件中，通过**$emit()来发射事件
2）在父组件中，通过v-on**来监听子组件事件

复制代码

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div id="app">
<cpn @item-click="cpnClick"></cpn> // 通过v-on监听子组件事件，函数名称后面不需要加参数
</div>
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item)">
{{item.name}}
</button>
</div>
</template>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1.子组件
const cpn = {
template: "#cpn",
data() {
return{
categories:[
{id:"aaa" ,name:"热门推荐"},
{id:"bbb" ,name:"手机数码"},
{id:"ccc" ,name:"家用电器"},
{id:"ddd" ,name:"电脑办公"},
]
}
},
methods:{
btnClick(item){
this.$emit('item-click',item) // 第一个为自定义事件名称，第二个为参数
}
}
}
//2.(父组件) 
var app = new Vue({
el: "#app",
data:{
},
components:{
'cpn': cpn
},
methods:{
cpnClick(item){
console.log(item);
}
}
})
</script>