Vue3组件通信 详解(下)

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

1. 概述：$attrs用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）。

2. 具体说明：$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

1. 概述：实现祖孙组件直接通信

2. 具体使用：

   • 在祖先组件中通过provide配置向后代组件提供数据

   • 在后代组件中通过inject配置来声明接收数据

3. 具体编码：

   【第一步】父组件中，使用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博客