一、父子組件如何進行通信？
父子間通信.png
- 父組件向子組件通信使用 props, props定義在子組件中
- 子組件向父組件通信使用
parent
二、什么是父組件，什么是子組件？
要看組件的引用關(guān)系，如果A組件引用了B組件，那么A組件為父組件，B組件為子組件
三、組件構(gòu)成父子關(guān)系的步驟
在父組件中：
- 引入
- 注冊
- 使用
四、代碼示例：
其中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>
五、父子組件通信：父組件傳遞給子組件
- 父組件向子組件傳遞數(shù)據(jù)，比如修改子組件的展示“這是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('自定義事件名'， 參數(shù))的形式。通過事件的方式將數(shù)據(jù)回傳給父組件。
舉個實例：假設(shè)上述子組件中有兩個按鈕，一個按鈕上展示的是red，一個按鈕上展示的是blue，當點擊按鈕時，將red和blue傳遞給父組件。
效果圖：
image.png
注意事項：
子組件中：
this.$emit('自定義事件名'，參數(shù)) 其中自定義的事件名不可使用駝峰命名法。
子組件的引用中需要@自定義事件名=
=號后可以跟父組件中的方法名，其中方法的參數(shù)即為子組件傳遞過來的參數(shù)。
<!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) {
//不帶參數(shù)的傳遞
// if(val == 'red') {
// // $emit注意這里不要使用駝峰命名法。
// this.$emit('child-click-red');
// }
// else if (val == 'blue'){
// this.$emit('child-click-blue');
// }
//帶有參數(shù)傳遞
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>
