vue 父子组件相互传参

<template>
<div>
<div>{{count}}</div>
<div v-for="(item, index) in list">{{item}}</div>
<button v-on:click="sendMsg">向父组件传参</button> <!-- 这里用简单的绑定方法触发传参-->
</div>
</template><script>
export default {
name: 'main_header',
props: ['count', 'list'],
methods: {
sendMsg: function () { //传参方法
this.$emit('headCallBack', '子组件的参数内容'); //第一个参数是父组件中v-on绑定的自定义回调方法，第二个参数为传递的参数
}
}
};
</script><style>
</style>

<template>
<div id="app">
<img src="./assets/logo.png">
<div>子组件传过来的内容：{{msg}}</div>
<mainHeader :count="count" :list="list" v-on:headCallBack="headCall"></mainHeader> <!--通过v-on绑定方法，headCallBack为子组件中$emit()中第一个参数，headCall为回调方法，参数就传入这个方法中，看下面的方法-->
<router-view/>
</div>
</template><script>
import mainHead from './components/header/main_header';
var data = {
list: ['java', 'html', 'css', 'js']
};
export default {
name: 'app',
data: function () {
return {
count: 0,
list: data.list,
msg: ''
};
},
components: {
mainHeader: mainHead
},
methods: {
addCount: function () {
let _this = this;
setInterval(function () { _this.count++; }, 1000);
},
headCall: function (msg) { //回调方法，接收子组件传的参数
this.msg = msg;
}
},
mounted: function () {
this.$nextTick(function () {
this.addCount();
});
}
};
</script>