一、父子组件如何进行通信？
父子间通信.png
- 父组件向子组件通信使用 props, props定义在子组件中
- 子组件向父组件通信使用
parent
二、什么是父组件，什么是子组件？
要看组件的引用关系，如果A组件引用了B组件，那么A组件为父组件，B组件为子组件
三、组件构成父子关系的步骤
在父组件中：
- 引入
- 注册
- 使用
四、代码示例：
其中app是父组件，Home是子组件
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>父子组件的通信</title>
</head>
<body>
<div id="app">
<Home></Home>
</div>
<script src="../vue.js"></script>
<script>
//注册组件
Vue.component('Home', {
template: ' <div class="home">\
<p>这是Home组件</p>\
</div>'
})
var app = new Vue({
el: '#app',
data: {
text: ''
}
})
</script>
</body>
</html>
五、父子组件通信：父组件传递给子组件
- 父组件向子组件传递数据，比如修改子组件的展示“这是Home组件” 改成 “这是Home组件，父组件传来的值：hello”
展示效果：
image.png
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>父子组件的通信</title>
</head>
<body>
<div id="app" >
<p>这是是APP组件 (父组件)</p>
<Home content="父组件传来的值: hello"></Home>
</div>
<script src="../vue.js"></script>
<script>
//注册组件
Vue.component('Home', {
props: ['content'],
template: ' <div class="home" style="border: 1px solid blue">\
<p>这是Home组件 (子组件)</p>\
<p>{{ content }}</p>\
</div>'
})
var app = new Vue({
el: '#app',
data: {
text: ''
}
})
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
display: inline-block;
border: 1px solid orange;
padding: 10px;
}
</style>
</body>
</html>
六、父子组件通信：子传递给父组件
子组件向父组件通信的话，需要通过$emit('自定义事件名'， 参数)的形式。通过事件的方式将数据回传给父组件。
举个实例：假设上述子组件中有两个按钮，一个按钮上展示的是red，一个按钮上展示的是blue，当点击按钮时，将red和blue传递给父组件。
效果图：
image.png
注意事项：
子组件中：
this.$emit('自定义事件名'，参数) 其中自定义的事件名不可使用驼峰命名法。
子组件的引用中需要@自定义事件名=
=号后可以跟父组件中的方法名，其中方法的参数即为子组件传递过来的参数。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>父子组件的通信</title>
</head>
<body>
<div id="app" >
<p>这是是APP组件 (父组件)</p>
<Home @child-click-color="showColor"></Home>
<p>子组件点击的是: {{ color }}</p>
</div>
<script src="../vue.js"></script>
<script>
//注册组件
Vue.component('Home', {
template: ' <div class="home" style="border: 1px solid blue">\
<p>这是是Home组件 (子组件)</p>\
<button @click="handleClick(\'red\')" >red</button>\
<button @click="handleClick(\'blue\')">blue</button>\
</div>',
methods: {
handleClick: function(val) {
//不带参数的传递
// if(val == 'red') {
// // $emit注意这里不要使用驼峰命名法。
// this.$emit('child-click-red');
// }
// else if (val == 'blue'){
// this.$emit('child-click-blue');
// }
//带有参数传递
this.$emit('child-click-color', val);
}
}
})
var app = new Vue({
el: '#app',
data: {
color: 'default',
},
methods: {
showColor: function(val) {
this.color = val;
}
}
})
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
display: inline-block;
border: 1px solid orange;
padding: 10px;
}
</style>
</body>
</html>
