vue3.0组件通信 笔记
1.父传子
父组件:
<Check :status="status" />
setup(props, context) {
const status = ref(1);
return {
status
};
},
子组件:
<div>{{ status }}</div>
<script setup="props">
import { defineProps } from 'vue'
const props = defineProps({
status: Number
})
2.子组件调用父组件方法
如:关闭父组件的弹窗
子组件:
<div @click="off('false')"></div>
setup(props, context) {
const off = (data) => {
// 点击关闭按钮
context.emit('handle', data);
}
return {
off
};
},
父组件:
<!-- 侧边栏 -->
<van-popup
v-model:show="checkShow"
position="right"
round
:style="{ width: '7.18rem' }"
>
<Check @handle="handleFun" />
</van-popup>
<script setup>
import { ref } from "vue";
const checkShow = ref(false);
const handleFun = (data) => {
checkShow.value = false; //checkShow弹窗
};
3.支持多个数据双向绑定
父组件:
<child v-model:a="a" v-model:b="b"></child>
<script setup>
import { ref } from "vue"
import child from "./child.vue"
const a = ref("xxx")
const b = ref("哈哈")
</script>
子组件:
<template>
<div @click="handle">按钮</div>
</template>
<script setup>
const { emit } = useContext();
const handle = () => {
emit("update:a", "更新父级的a值")
emit("update:b", "更新父级的b值")
}
</script>
4. provide / inject
provide / inject 为依赖注入
provide
:可以让我们指定想要提供给后代组件的数据或
inject
:在任何后代组件中接收想要添加在这个组件上的数据,不管组件嵌套多深都可以直接拿来用
父组件:
<script setup>
import { provide } from "vue"
provide("title", "哈哈哈")
</script>
子组件:
<script setup>
import { inject } from "vue"
const title = inject("title")
console.log(title) //哈哈哈
</script>
5. expose / ref
父组件获取子组件的属性或者调用子组件的方法
子组件:
<script setup>
// 方法一 不适用于Vue3.2版本,该版本 useContext()已废弃
import { useContext } from "vue"
const { expose } = useContext();
// 子组件抛出方法
expose({
childName: "这是子组件的属性",
someMethod(){
console.log("这是子组件的方法")
}
});
方法二:适用于vue3.2版本,不需要引入
//import { defineExpose } from "vue";
defineExpose({
childName: "这是子组件的属性,
someMethod(){
console.log("这是子组件的方法")
}
})
</script>
父组件:注意 ref="RefChilde"
<template>
<child ref="RefChilde"></child>
<button @click="handle">按钮</button>
</template>
<script setup>
import child from "./child.vue;
import { ref } from "vue"
const RefChilde = ref(null)
const handle = () => {
console.log(RefChilde.value.childName)//获取子组件对外暴露的属性
RefChilde.value.childClick()//调用子组件的里的方法
}
</script>
部分借鉴于 juejin.cn/post/699968…