vue父子组件_通讯传值

2018年11月13日作者: 国瑞个人博客 503次浏览

国瑞前端：在项目中，总会有一些交互，在使用vue的时候，就会涉及到传值等操作，本博文就来给大家讲讲父子组件传值的故事！
查看示例的时候请F12（谷歌浏览器）打开console调试框方便看到调试结果

vue父子组件传值常用方法

首先我们来讲在vue组件中常见的几种关系以及涉及到的知识点：

1、父组件向子组件传值

这里会用到props进行传输

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<title>父组件向子组件中传值</title>
<script src="https://www.huanggr.cn/vue/2.5.15/vue.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

img {
border: 0;
}

ol,
ul,
li {
list-style: none;
}

.box {
width: 400px;
height: 200px;
background: red;
border: 1px solid yellow;
border-radius: 5px;
margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div id="app">

<Model :for-data="obj"></Model>

</div>
</body>
</html>
<script type="text/javascript">
Vue.component('Model', {
props: {
forData: {
type: Object,
default: 'default'
}

},
data() {
return {
message: 0
}
},
template: ` <div class="box" >
<button @click="open">+1</button>
<div>
这里是数据：{{forData}}
<div>
messages的值为：{{message}}
</div>

<ul>a
<li v-for="item in forData">{{item.a}}</li>
</ul>
</div>
</div>`,
methods: {
open(e) {
//父组件传值到子组件
this.message = this.message + 1
this.forData.push({
a: this.message
})

}

}
})
new Vue({
el: "#app",
data: {
obj: [{
'a': 1
}, {
'a': 1
}]

}
})
</script>

浏览效果请猛戳此处：点击

在组件中写成forData，在html中就要写成for-data，并且要动态绑定，obj为父组件中定义的数据

2、子组件向父组件传值

使用$emit，自定义事件

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<title>子组件向父组件中传值</title>
<script src="https://www.huanggr.cn/vue/2.5.15/vue.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

img {
border: 0;
}

ol,
ul,
li {
list-style: none;
}

.box {
width: 400px;
height: 200px;
background: red;
border: 1px solid yellow;
border-radius: 5px;
margin: 10px 0 0 10px;
}
</style>
</head>

<body>
<div id="app">

<Model :for-data="obj" @on-ok="ok"></Model>

</div>
</body>

</html>
<script type="text/javascript">
Vue.component('Model', {
props: {
forData: {
type: Object,
default: 'default'
}

},
data() {
return {
message: 0
}
},
template: ` <div class="box" >
<button @click="open">+1</button>
<div>
这里是数据：{{forData}}
<div>
messages的值为：{{message}}
</div>

<ul>a
<li v-for="item in forData">{{item.a}}</li>
</ul>
</div>
</div>`,
methods: {
open(e) {
//父组件传值到子组件
this.message = this.message + 1
this.forData.push({
a: this.message
})
//自定义事件使用
this.$emit('on-ok', {
'forData': this.forData,
'message': this.message
})

}

}
})
new Vue({
el: "#app",
data: {
obj: [{
'a': 1
}, {
'a': 1
}]

},
methods: {
ok(e) {
console.log('从子组件中传回父组件的值')
console.log(e)
}
}
})
</script>

浏览效果请猛戳此处：点击

3、同一父组件下，两个子组件传值

这里需要用到子组件向父组件传递数据，然后父组件在分发给另一个子组件，复杂的逻辑交互最好使用vuex来进行操作

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<title>同级组件通讯</title>
<script src="https://www.huanggr.cn/vue/2.5.15/vue.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

img {
border: 0;
}

ol,
ul,
li {
list-style: none;
}

.box {
width: 400px;
height: 200px;
background: red;
border: 1px solid yellow;
border-radius: 5px;
margin: 10px 0 0 10px;
}
</style>
</head>

<body>
<div id="app">

<Model-one :for-data="hots" @on-ok="ok"></Model-one>
<Model-two :for-data="hots" @on-ok="ok"></Model-two>

</div>
</body>

</html>
<script type="text/javascript">
Vue.component('ModelOne', {
props: {
forData: {
type: Number,
default: 'default'
}
},
data() {
return {
message: 0
}
},
template: `
<div class="box" >
<button @click="open">+1</button>
<div>这里是第一个子组件，需要将值传给第二个子组件：{{forData}}</div>
</div>`,
methods: {
open(e) {

//自定义事件使用
this.$emit('on-ok', {
'message': this.forData + 1
})
}
}
})

Vue.component('ModelTwo', {
props: {
forData: {
type: Number,
default: 'default'
}
},
data() {
return {
message: 0
}
},
template: ` <div class="box" >
<button @click="open">+1</button>
<div>
这里是数据：{{forData}}

</div>
</div>`,
methods: {
open(e) {
console.log(this.forData)
//自定义事件使用
this.$emit('on-ok', {
'message': this.forData + 1
})
}
}
})

new Vue({
el: "#app",
data: {
hots: 0
},
methods: {
ok(e) {
this.hots = e.message
}
},
watch: {
hots(e) {}

}
})
</script>