Vue3组件通信 详解(上)-CSDN博客
v-model通讯
概述:实现 父↔子 之间相互通信。
v-model本质
组件标签上的v-model
的本质::moldeValue
+ update:modelValue
事件。
<!-- 组件标签上使用v-model指令 -->
<AtguiguInput v-model="userName"/><!-- 组件标签上v-model的本质 -->
<AtguiguInput :modelValue="userName" @update:model-value="userName = $event"/>
model2.vue文件
<template><h2>{{ prop.num1 }}</h2><button @click="add">按钮2</button></template><script setup lang="ts" name="Model1">
import { ref, onUnmounted, onMounted } from 'vue';//获取v-model中的值和方法
let prop = defineProps(['num1']);
let emits = defineEmits(['update:num1']);//子组件中值+1
function add(){emits('update:num1',prop.num1+1)
}</script>
model1.vue文件
<template><h2>----------父组件--------------------</h2><h2>{{ num }}</h2><button @click="add">按钮1</button><h2>----------子组件--------------------</h2><Model2 v-model:num1="num"></Model2></template><script setup lang="ts" name="Model1">
import { ref, onUnmounted, onMounted } from 'vue';
import Model2 from './Model2.vue'
//定义数据
let num=ref(0);
//父组件中值+1
function add(){num.value+=1;
}</script>
效果
$attrs
-
概述:
$attrs
用于实现当前组件的父组件,向当前组件的子组件通信(祖→孙)。 -
具体说明:
$attrs
是一个对象,包含所有父组件传入的标签属性。注意:
$attrs
会自动排除props
中声明的属性(可以认为声明过的props
被子组件自己“消费”了)
父组件:
<template><div class="father"><h3>父组件</h3><Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import { ref } from "vue";let a = ref(1)let b = ref(2)let c = ref(3)let d = ref(4)function updateA(value){a.value = value}
</script>
子组件:
<template><div class="child"><h3>子组件</h3><GrandChild v-bind="$attrs"/></div>
</template><script setup lang="ts" name="Child">import GrandChild from './GrandChild.vue'
</script>
孙组件:
<template><div class="grand-child"><h3>孙组件</h3><h4>a:{{ a }}</h4><h4>b:{{ b }}</h4><h4>c:{{ c }}</h4><h4>d:{{ d }}</h4><h4>x:{{ x }}</h4><h4>y:{{ y }}</h4><button @click="updateA(666)">点我更新A</button></div>
</template><script setup lang="ts" name="GrandChild">defineProps(['a','b','c','d','x','y','updateA'])
</script>
provide、inject
-
概述:实现祖孙组件直接通信
-
具体使用:
-
在祖先组件中通过
provide
配置向后代组件提供数据 -
在后代组件中通过
inject
配置来声明接收数据
-
-
具体编码:
【第一步】父组件中,使用
provide
提供数据
<template><div class="father"><h3>父组件</h3><h4>资产:{{ money }}</h4><h4>汽车:{{ car }}</h4><button @click="money += 1">资产+1</button><button @click="car.price += 1">汽车价格+1</button><Child/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import { ref,reactive,provide } from "vue";// 数据let money = ref(100)let car = reactive({brand:'奔驰',price:100})// 用于更新money的方法function updateMoney(value:number){money.value += value}// 提供数据provide('moneyContext',{money,updateMoney})provide('car',car)
</script>
注意:子组件中不用编写任何东西,是不受到任何打扰的
【第二步】孙组件中使用inject
配置项接受数据。
<template><div class="grand-child"><h3>我是孙组件</h3><h4>资产:{{ money }}</h4><h4>汽车:{{ car }}</h4><button @click="updateMoney(6)">点我</button></div>
</template><script setup lang="ts" name="GrandChild">import { inject } from 'vue';// 注入数据let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})let car = inject('car')
</script>
pinia
Vue3 pinia全解(上)-CSDN博客
slot插槽
Vue 插槽讲解-CSDN博客