1.首先在项目目录中新建template文件夹，里边包含父组件:List.vue以及子组件:firstComponent.vue，secondComponent.vue。
2.父组件引入子组件并且在components中注册
import LIST from '../template/List';
export default {
components:{LIST}
}
页面直接引用
<LIST></LIST>
3.父组件向子组件传值
<LIST :pageNum="pageNum" :father="father" :tableData="tableData"></LIST>
子组件需要在props接收
export default{
props:['tableData',"father","pageNum"]
}
子组件页面直接引用
<div>{{father}}</div>
<div>{{pageNum}}</div>
<div :data="tableData"></div>
4.父组件调用子组件的方法需要使用ref定义
<LIST :pageNum="pageNum" :father="father" :tableData="tableData" ref="myChild"></LIST>
父组件methods方法：
methods: {
clickParent(){
this.$refs.myChild.childClick();
}
}
子组件方法：
methods:{
childClick(){
alert('123')
}
5.子组件调用父组件的方法使用 this.$emit,或者this.$parent
子组件方法：
methods:{
handleEdit(index, row){
// this.$parent.handleEdit(index, row);//第一种方法
this.$emit('handleEdit',index,row);//第二种方法this.$emit
}
},
父组件需要使用@handleEdit自定义方法名称
<LIST :pageNum="pageNum" :father="father" :tableData="tableData" ref="myChild" @handleEdit='handleEdit'></LIST>
父组件方法：
handleEdit(index, row) {
this.idx = index;
this.form = row;
},
5.子组件向父组件传值用this.$emit
子组件方法：
sendMsg(){
//func: 是父组件指定的传数据绑定的函数，123:子组件给父组件传递的数据
this.$emit('func',‘123’)
}
父组件：@func自定义函数名称
<LIST :pageNum="pageNum" :father="father" :tableData="tableData" ref="myChild" @func="getChild" @handleEdit='handleEdit'></LIST>
methods:{
//接受子组件的传值
getChild(data){
console.log(data)
},
}
二。兄弟组件间的传值使用bus（事件总线）
1.首先新建一个js文件：bus.js:
import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();
export default bus;
2.在子组件中分别引入bus.js
import bus from '../bus.js';
（1） firstComponents:第一个子组件中传值：
methods:{
sendFirst(){
bus.$emit('clickFirstEvent','这是从第一个组件传过来的值')
}
}
（2） secondComponents:第二个子组件中接收：
mounted(){
bus.$on('clickFirstEvent',res=>{
console.log(res)
})
}
