【vue3】vue3组件通讯一篇就够了

父子组件通讯

props(父传子)

父组件使用子组件时，传自定义属性，子组件props接收：

//父组件
<template>
  <Parent msg="父组件消息" :wgh="{name:'wgh',age: 18}" :title="title" />
</template>
<script lang='ts' setup>
import Parent from '@/component/Parent.vue';
import {ref} from "vue";
const title = ref('父传子通讯');
</script>

//子组件
<template>
  <div>
    <h3>{{title}}</h3>
    <div>子组件没有props接收的自定义属性：{{$attrs}}</div>
    <div>自定义属性是引用类型:{{wgh}}</div>
  </div>
</template>
<script lang='ts' setup>
defineProps<{wgh:{name:string,age:number},title:string}>()
</script>

tips:子组件不定义props接收的属性，在attr中。

emit(子组件向父组件通讯)

子组件通过emit向父组件通讯，父组件通过自定义事件接收

//父组件
<template>
  <Parent
      @getInputVal="msg => childInput = msg"
      @getChildMsg="String => childMsg = msg" />
  <h3>展示子组件的消息</h3>
  <div>{{childMsg}}</div>
  <div>{{childInput}}</div>
</template>
<script lang='ts' setup>
import Parent from '@/component/Parent.vue';
import {ref} from "vue";
const childMsg = ref<string>();
const childInput = ref<string>();
</script>


//子组件
<template>
  <div>
    <h3>子组件向父级组件通讯</h3>
    <button @click="$emit('getChildMsg','你好,明天')">点击向父级通讯</button>
    <div>
      <input @input="e => $emit('getInputVal', e.target.value)" >
    </div>
  </div>
</template>

组件上的v-model

表单上的v-model都玩过，双向绑定用起来也很方便，组件添加v-model也是很重要的，实际上，这种通讯跟props&emit一样原理，只是通过emit修改v-model绑定的属性，可以省略父组件中自定义事件接收步骤，用起来很方便。

举个栗子：

//父
<template>
  <div>{{value}}{{title}}{{name}}</div>
  --------------------------
  <vModelTest class="com" style="font-size: 10px" v-model="value" v-model:title="title" v-model:name="name"></vModelTest>
</template>
<script lang="ts" setup>
  import { ref } from "vue";
  import vModelTest from '@/components/vModelTest.vue';
  const value = ref<number>(1);
  const title = ref<string>('我系渣渣辉');
  const name = ref<string>('wgh');
</script>

//子
<template>
    <div>11</div>
    <div class="box" style="color: red">
      <div class="box">
        <p>{{$attrs.modelValue}}</p>
        <p>{{$attrs.title}}</p>
        <p>{{$attrs.name}}</p>
      </div>
      <button @click="fn">emit button</button>
    </div>
</template>
<script setup lang="ts">
  //v-model子组件向父组件通讯可以不用props接收,v-model默认绑定modelValue属性名,可以给v-model取别名,同一个组件可以绑定多个v-model属性
  const emits = defineEmits(['update:modelValue','update:title','update:name'])

  const fn = () => {
    emits('update:modelValue', 5);
    emits('update:title', '我系古天乐');
    emits('update:name', 'wughuanghui');
  }
</script>

不明白还可看 给自己封装的组件添加v-model（vue3）

父组件访问子组件实例

• 子组件定义方法变量,并且用defineExpose暴露出去；
• 父组件中使用是给子组件添加ref属性,挂载完成即可访问到组件实例,包括暴露的变量方法。

//子组件
<template>
    <div :style="'color:'+ color">你好</div>
</template>
<script lang='ts' setup>
import {ref} from "vue";
import {mock} from 'mockjs';
const color = ref(mock('@color'));
const reColor = () => {
  color.value = mock('@color');
}
defineExpose({reColor})
</script>

//父组件
<template>
  <Parent ref="parentRef" />
  <button @click="parentRef.reColor()">按钮</button>
</template>
<script lang='ts' setup>
import Parent from '@/component/Parent.vue';
import {onMounted, ref} from "vue";
const parentRef = ref();

onMounted(() => {
  console.log(parentRef)
})
</script>

依赖注入(跨级组件通讯)

• provide：提供一个值,可以被后代组件注入；
• inject:：注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。

栗子:

//祖先组件
<template>
  <Parent></Parent>
</template>
<script lang='ts' setup>
import Parent from '@/component/Parent.vue';
import {provide, ref} from "vue";
const msg = ref('消息');
const sayHello = () => {
  console.log('我是祖先组件啦啦啦啦啦')
}
provide('provideObj', {
  msg,
  sayHi: sayHello
})
</script>


//父级组件
<template>
    <Children />
</template>
<script lang='ts' setup>
</script>

//注入组件
<template>
  <div>
    <div>子组件</div>
    <div>{{msg}}</div>
    <button @click="sayHi">按钮</button>
  </div>
</template>
<script lang='ts' setup>
import { onMounted,inject } from 'vue';
const { msg, sayHi } = inject<any>('provideObj')

onMounted(() => {
  console.log('子组件挂载完成');
})
</script>