1.父组件绑定参数，子组件props接收
// 父组件
<template>
<div id="father">
<data :msg="msg" :fn="myFunction"></data>
</div>
</template>
<script>
import data from "./data .vue";
export default {
name: father,
components: {
data
}
data() {
msg: "父组件定义的数据";
},
methods: {
myFunction() {
console.log("father");
}
},
};
</script>
// 子组件
<template>
<div id="son">
<p>{
{
msg}}</p>
<button @click="fn">按钮</button>
</div>
</template>
<script>
export default {
name: "data",
props: {
msg: {
type: String,
defalut:''
},
fn :{
type: Function,
}
}
};
</script>
2.父组件自定义绑定事件，子组件$emit接收
// 父组件
<template>
<div id="father">
<data @fn="myFunction"></data>
</div>
</template>
<script>
import data from "./data .vue";
export default {
name: father,
components: {
data
}
data() {
},
methods: {
myFunction() {
//编写需要的方法
console.log('0000000000000')
}
},
};
</script>
// 子组件
<template>
<div id="son">
<p>{
{
msg}}</p>
<button @click="fn">按钮</button>
</div>
</template>
<script>
export default {
name: "data",
},
data() {
},
methods: {
//调用父组件
sonHandle() {
this.$emit('fn')
}
},
};
</script>
3.ref / $refs
ref ：这个属性用在子组件上，可以将子组件的数据传给父组件
<template>
<child ref="child"></child>
</template>
<script>
import child from './child.vue'
export default {
components: {
child },
created() {
this.$refs.child.open()//调用子组件的open方法
//通过ref可以获取子组件的所有实例
}
}
</script>
4.this.$parent通信（子组件访问父组件）
//父组件
<template>
<div id="father">
<data ></data>
</div>
</template>
<script>
import data from "./data .vue";
export default {
name: father,
components: {
data
}
data() {
msg:'0000000000000000'
},
methods: {
myFunction() {
//编写需要的方法
console.log('0000000000000')
}
},
};
</script>
// 子组件
<template>
<div id="son">
<p>{
{
msg}}</p>
<button @click="fn">按钮</button>
</div>
</template>
<script>
export default {
name: "data",
},
data() {
},
methods: {
//调用父组件
fn() {
this.$nextTick(() => {
//一般推荐加nextTick和保证组件有渲染不能v-if
this.$parent.myFunction();//访问父组件的方法
});
}
},
};
</script>
5.provide 和 inject通信
//grandpa.vue
<template>
<div>
<h3 style="margin-bottom: 20px">爷爷组件</h3>
<el-button type="primary" @click="lookDetail">查看</el-button>
<!-- 儿子组件 -->
<son v-model:visible="openDialog"></son>
</div>
</template>
<script>
import Son from "./son.vue";
export default {
components: {
Son },
data() {
return {
message: "aa",
openDialog: false,
};
},
methods: {
lookDetail() {
this.openDialog = true;
},
},
};
</script>
//son.vue
<template>
<div>
<el-dialog v-model="visible" title="父组件" width="50%" append-to-body @close="closeDialog">
<el-button type="primary" @click="lookDetail">查看</el-button>
</el-dialog>
<!-- 孙子组件 -->
<grandson v-model:visible="openDialog"></grandson>
</div>
</template>
<script>
//孙子组件
import grandson from "./grandson.vue";
export default {
components: {
grandson,
},
props: {
visible: {
type: Boolean,
default: false,
},
},
emit: ["update:visible"],
data() {
return {
openDialog: false,
};
},
methods: {
closeDialog() {
this.$emit("update:visible", false);
},
lookDetail() {
this.openDialog = true;
},
},
};
</script>
//grandson.vue
<template>
<div>
<el-dialog v-model="visible" title="孙子组件" width="30%" @close="closeDialog">
</el-dialog>
</div>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false,
},
},
emit: ["update:visible"],
data() {
return {
};
},
methods: {
closeDialog() {
this.$emit("update:visible",false)
},
},
};
</script>
6、eventBus事件总线（$emit / $on）
eventBus事件总线适用于父子组件、非父子组件等之间的通信
创建事件中心管理组件之间的通信
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
兄弟组件firstCom和secondCom
<template>
<div>
<first-com></first-com>
<second-com></second-com>
</div>
</template>
<script>
import firstCom from './firstCom.vue'
import secondCom from './secondCom.vue'
export default {
components: {
firstCom, secondCom }
}
</script>
<template>
<div>
<button @click="add">加法</button>
</div>
</template>
<script>
import {
EventBus} from './event-bus.js' // 引入事件中心
export default {
data(){
return{
num:0
}
},
methods:{
add(){
EventBus.$emit('addition', {
num:this.num++
})
}
}
}
</script>
接收事件
<template>
<div>求和: {
{
count}}</div>
</template>
<script>
import {
EventBus } from './event-bus.js'
export default {
data() {
return {
count: 0
}
},
mounted() {
EventBus.$on('addition', param => {
this.count = this.count + param.num;
})
}
}
</script>
7、$attrs / $listeners
实组件之间的跨代通信。
$attrs：继承所有的父组件属性（除了props传递的属性、class 和 style），一般用在子组件的子元素上
$listeners：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合 v-on=" $listeners " 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）
A组件
<template>
<div id="app">
//此处监听了两个事件，可以在B组件或者C组件中直接触发
<child1 :p-child1="child1" :p-child2="child2" @test1="onTest1" @test2="onTest2"></child1>
</div>
</template>
<script>
import Child1 from './Child1.vue';
export default {
components: {
Child1 },
methods: {
onTest1() {
console.log('test1 running');
},
onTest2() {
console.log('test2 running');
}
}
};
</script>
B组件
<template>
<div class="child-1">
<p>props: {
{
pChild1}}</p>
<p>$attrs: {
{
$attrs}}</p>
<child2 v-bind="$attrs" v-on="$listeners"></child2>
</div>
</template>
<script>
import Child2 from './Child2.vue';
export default {
props: ['pChild1'],
components: {
Child2 },
inheritAttrs: false,
mounted() {
this.$emit('test1'); // 触发APP.vue中的test1方法
}
};
</script>
C组件
<template>
<div class="child-2">
<p>props: {
{
pChild2}}</p>
<p>$attrs: {
{
$attrs}}</p>
</div>
</template>
<script>
export default {
props: ['pChild2'],
inheritAttrs: false,
mounted() {
this.$emit('test2');// 触发APP.vue中的test2方法
}
};
</script>