vue---父组件和子组件的通信
文章目录
- 一.父组件与子组件的定义
- 二.子组件接受父组件消息
- 三.子组件向父组件发送消息
- 四.开发与应用
一.父组件与子组件的定义
我们在前面的《vue—组件详解》简单介绍了一下父组件与子组件，下面我们在来详细介绍一下。
我们通过在父组件中使用components来说明我们的子组件，特别的，我们的Vue可以看作根组件。
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
<my-button></my-button>
</div>
<script type = "text/javascript">
const tempSon = Vue.extend({
template:
`<h1>
Good Morning
</h1>`
})
const tempFather = Vue.extend({
template:
`<div>
<h1>Good Night</h1>
<temp></temp>
</div>
`,
components:{
temp:tempSon
}
})
const app = new Vue({
el:"#app",
data:{
},
components:{
myButton:tempFather
}
})
</script>
</body>
</html>
二.子组件接受父组件消息
我们在子组件中设置一个叫props的属性，通过它来接收父组件传来的消息，此外，我们还通过v-bind:绑定我们的值，通过绑定，我们可以拿到父组件的值放到props属性中，这样就能实现父组件向子组件传值。举个简单的例子，我们拿快递的时候，商家会通过快递公司，将商品放到菜鸟裹裹，然后我们再从菜鸟裹裹中获取商品，而props的作用就相当于菜鸟裹裹。
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
<cpn v-bind:qin1 = "fruits" v-bind:qin2 = "university"></cpn>
</div>
<template id = "cpn">
<div>
<h1>{
{
qin1}}</h1>
<h2>{
{
qin2}}</h2>
</div>
</template>
<script type = "text/javascript">
const cpn = {
template:'#cpn',
props:['qin1','qin2'],
data() {
return {
}
},
}
const app = new Vue({
el:"#app",
data:{
fruits:'apple',
university:'qing',
},
components:{
cpn
}
})
</script>
</body>
</html>
三.子组件向父组件发送消息
我们也许会想到，能不能通过props向父组件发送消息呢，答案是否定的，我们vue中规定，props具有单向传递性。但是我们可以通过自定义事件，父组件监听子组件，从而获得子组件的消息。
说明：
1.首先当在屏幕上点击按钮（也就是触发子组件的click事件），就开时执行btnClick事件，emit是发射的意思，也就是将事件和消息发射出去(触发item-click事件)。
2.通过触发item-click事件，而父组件通过@item-click监听到了事件，进而去执行cpnClick事件。
3.vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn；
(官方对$emit的解释为：触发当前实例上的事件。附加参数都会传给监听器回调。)
我自己的理解为触发event事件后，传递arg给父组件，父组件通过@event监听传过来的参数并且接收。
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
<cpn @item-click="cpnClick"></cpn>
</div>
<template id = "cpn1">
<div>
<button v-for="item in myList" @click="btnClick(item)">
{
{
item.name}}
</button>
</div>
</template>
<script type = "Text/javascript">
const cpn = {
template:"#cpn1",
data:function() {
return{
myList:[
{
id : "aaa", name : "apple"},
{
id : "bbb", name : "banana"},
{
id : "ccc", name : "watermelon"},
]
}
},
methods:{
btnClick(item){
this.$emit('item-click', item)
}
}
}
const app = new Vue({
el:"#app",
data:{
message:'Hello'
},
methods:{
cpnClick(item){
console.log('cpnClick', item);
}
},
components:{
cpn
}
})
</script>
</body>
</html>
四.开发与应用
我们在开发过程中，会划分许多的模块，也就是不同的组件，它们之间需要进行通信，比如下面的京东页面，当我们点击子组件的不同按钮时，父组件会发生不同的变化，当我们点击父组件时，子组件也会发生改变。