vue3vue3组件通讯一篇就够了

Posted 2022-11-27 GHUIJS

父子组件通讯

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>valuetitlename</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>