vue3 的组件通信
1、propsprops主要用于父组件向子组件通信。在父组件中通过用 :msg="msg" 绑定需要传给子组件的属性值,然后再在子组件中用 props 接收该属性值。方法一:// 父组件 传值<child :msg1="msg1" :msg2="msg2"></child><script>import child from "./child.vue";impor
·
1、props
props主要用于父组件向子组件通信。在父组件中通过用 :msg="msg" 绑定需要传给子组件的属性值,然后再在子组件中用 props 接收该属性值。
方法一:
// 父组件 传值
<child :msg1="msg1" :msg2="msg2"></child>
<script>
import child from "./child.vue";
import { ref, reactive } from "vue";
export default {
setup() {
//基础类型传值
const msg1 = ref("父组件传给子组件的msg1");
// 复杂类型(数组或对象)传值
const msg2 = reactive(["父组件传给子组件的msg2"]);
// const msg2 = reactive({"父组件传给子组件的msg2"});
return {
msg1,
msg2
}
}
}
</script>
// 子组件 接收
<script>
export default {
// props接受父组件传过来的值
props: ["msg1", "msg2"],
setup(props) {
console.log(props);
// { msg1:"父组件传给子组件的msg1", msg2:"父组件传给子组件的msg2" }
},
}
</script>
方法二:使用 setup 语法糖
// 父组件 传值
<child :msg="msg">
</child>
<script setup>
import child from "./child.vue";
import { ref, reactive } from "vue";
const msg = ref("父组件传给子组件的值");
// const msg = reactive(["父组件传给子组件的值"]);
// const msg = reactive({"父组件传给子组件的值"});
</script>
// 子组件 接收
<script setup>
// 这里不需要在从vue中引入defineProps,直接用
const props = defineProps({
// 第一种写法
msg: String;
// 第二种写法
msg:{
type:String,
default:""
}
})
console.log(props);
</script>
2、$emit
$emit 也就是通过自定义事件传值,主要用于子组件向父组件通信。
在子组件的点击事件中,通过触发父组件中的自定义事件,把想传给父组件的信息以参数的形式带过去,父组件便可以拿到子组件传过来的参数值。
// 子组件 派发
<template>
<button @click="handleClick">按钮</buttom>
// <button @click="emit('myClick')">按钮</buttom>
</template>
<script setup>
const handleClick = () => {
// 触发父组件中的方法,并把值以参数的形式传过去
// 这里触发的方法名要和父组件中@符后面的名称一样
emit("myClick", "子组件向父组件传送的信息");
}
// const emit = defineEmits(["myClick","子组件向父组件传送的信息"]);
</script>
// 父组件 接收
<template>
<child @myClick="onMyClick"></child>
</template>
<script setup>
import child from "./child.vue";
// 父组件接受到子组件传过来的值
const onMyClick = (msg) => {
console.log(msg);
}
</script>
3、expose / ref
expose与ref 主要用于父组件获取子组件的属性或方法。在子组件中,向外暴露出属性或方法,父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。
// 子组件
<script setup>
// 方法一、使用expose对外暴露属性或方法
ctx.expose({
childName: "子组件的名称属性",
childMethod(){
console.log("子组件的方法");
}
})
// 方法二,使用defineExpose
// defineExpose({
// childName: "子组件的名称属性",
// childMethod(){
// console.log("子组件的方法");
// }
// })
</script>
// 父组件
<template>
<child ref="childRef"></child>
<button @click="handlerClick">按钮</button>
</template>
<script setup>
import child from "./child.vue";
import { ref } from "vue";
const childRef = ref(null);
const handlerClick = () => {
// 获取子组件对外暴露的属性
const childName = childRef.value.childName;
console.log(childName);
// 调用子组件对外暴露的方法
comp.value.childMethod();
}
</script>
4、attrs
attrs 主要用于子组件获取父组件中没有通过 props 接收的属性。
// 父组件 传值
<child :msg1="msg1" :msg2="msg2" title="子组件"></child>
<script setup>
import child from "./child.vue";
import { ref, reactive } from "vue";
const msg1 = ref("信息1");
const msg2 = ref("信息2");
</script>
// 子组件 接收
<script setup>
// import { defineProps, useAttrs } from "vue";
// 子组件接收msg1
const props = defineProps({
msg1: String
})
const attrs = useAttrs();
// 因为子组件接收了msg1,所以打印的结果中不会包含msg1, { msg2:"信息1", title: "子组件" }
// 如果子组件没有接收msg1,打印的结果就是 { msg1: "信息1", msg2:"信息12", title: "子组件" }
console.log(attrs);
</script>
5、provide / inject
provide与inject 主要为父组件向子组件或多级嵌套的子组件通信。
provide:在父组件中可以通过 provide 提供需要向后代组件传送的信息。
inject:从父组件到该组件无论嵌套多少层都可以直接用 inject 拿到父组件传送的信息。
// 父组件
<script setup>
import { provide } from "vue";
// 父组件通过 provide 提供给子组件的信息
provide("name", "提供给后代组件的信息");
</script>
// 子组件或后代组件(不管几级子组件)
<script setup>
import { inject } from "vue";
// 后代组件通过 inject 可以直接拿到父组件提供的信息
const name = inject("name");
console.log(name);
</script>
6、 v-model
v-model 主要用于父子组件中多个数据的双向绑定。
// 父组件
<child v-model:msg="msg" ></child>
<script setup>
import child from "./child.vue";
import { ref } from "vue";
// v-model双向绑定
const msg = ref("父组件中的msg");
</script>
// 子组件
<template>
<button @click="handlerClick">按钮</button>
</template>
<script setup>
// 子组件接收父组件传过来的属性值
const props = defineProps({
msg: {
type: String,
default: ''
}
})
// 子组件通过emit更改父组件中msg的值
const emit = defineEmits(['msg']);
const handlerClick = () => {
emit('update:msg', '子组件更新了的msg');
}
</script>
还有一种就是使用 Vuex 仓库啦!
更多推荐
已为社区贡献1条内容
所有评论(0)