vue父子组件之间的通信一般可以分为两种：
- 一种是父组件传递数据到子组件
- 一种是子组件传递数据到父组件
下面就分别举例说明：
1.父组件向子组件传递参数
vue中，父组件向子组件传递数据一般通过props。
父组件：
<template>
<div class="video-list">
<list-live :liveList="liveList"></list-live>
</div>
</template>
<script>
import listLive from '../subComponents/listStyle.vue';
export default {
name:'liveList',
data() {
return {
liveList:[],
}
},
components:{
listLive,
},
}
</script>子组件：
<template>
<ul>
<li v-for="live in liveList" class="slider-up">
<h3 class="one-line">{{live.title}}</h3>
<span class="one-line">{{live.speaker}}</span>
<span class="one-line">{{live.timeTip}}</span>
</li>
</ul>
</template>
<script>
export default {
name:'listStyleLive',
data(){
return {
defaultImg:defaultImages.defaultLiveVideo,
}
},
props:{
liveList:{
type:Array,
required:true
}
}
}
</script>
2.子组件向父组件传递参数
由于vue是只允许单向数据传递，所以我们可以通过触发事件来通知父组件改变数据，从而达到改变子组件的数据目的。
子组件：
<template>
<el-dropdown>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<a class="avatar-menu" @click="fireLogout">
退出
</a>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
data() {
return {
title:'hello'
}
},
methods:{
fireLogout() {
this.$emit("logout",this.title);
},
},
}
</script>
父组件：
<template>
<div class="videos">
<ava-header @logout="logout"></ava-header>
</div>
</template>
<script>
import avaHeader from '../../components/avaHeader.vue';
export default {
data() {
return {
}
},
components:{
avaHeader,
},
methods:{
logout(name) {
this.$http.get(loginOut, {
params: {
no: userInfo.no,
token: userInfo.token
}
}).then(res => {
if (res.data.success) {
this.load = true;
}
}
},
}
</script>
以上就是父子通信的简单实例，当然在实际应用中可能还会有更多复杂的情况，以后再扩充。
