移动端 父子组件之间的通信

lgbo · June 12, 2020 · 1 hits

父组件向子组件传递信息 通过 props 属性

eg: 父组件的 data 属性里有 message 和 movies 两个属性,现在要实现将这两个属性的内容传递给子组件,并在子组件中进行显示。

  • 方法:在子组件中定义 props 属性,在父组件中引入子组件时,将 props 中的属性和父组件中的 message 和 movies 做一个绑定即可

子组件向父组件传递信息 通过 this.$emit(‘event’,[args])

eg: 子组件里有一个简单的三个 button 按钮的导航栏,点击不同的按钮时,会将次按钮的信息传递给父组件,并在父组件中进行显示

  • 方法: 在父组件中进行方法绑定

code
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

<html lang="en">

<head>
<meta charset="UTF-8">
<title>父子组件通信</title>
<script src="vue.min.js"> </script>
</head>

<body>


<div id="app">
<cpn :cmovies="movies" :cmessage="message" @itemclick="cpnclick"></cpn>
</div>

<!-- 子组件 -->
<template id="cpn">
<div>
<button v-for="item in categories" @click="itemclick(item)"> {{item.name}} </button>
<h2>{{cmessage}}</h2>
{{cmovies}}
</div>
</template>

<script>
//子组件
const cpn = {
template: '#cpn',
props: {
cmovies: Array,
cmessage: String
},
data() {
return {
categories: [
{ id: 1, name: '热门推荐' },
{ id: 2, name: '手机数码' },
{ id: 3, name: '家用办公' }
]
}
},
methods: {
itemclick(item) {
this.$emit('itemclick', item)

}
}
}
//父组件 将父组件中的message和movies传递给子组件来显示
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
movies: ['海王', '海尔兄弟', "加勒比海盗"]
},
components: {
cpn //注册子组件
},
methods: {
cpnclick(item) {
console.log(item) //打印子组件传递的按钮信息
}
}
})
</script>
</body>

</html>
No Reply at the moment.
You need to Sign in before reply, if you don't have an account, please Sign up first.