经典知识回顾Vue篇（1）：Vue2和Vue3组件通信方式对比vue2组件通信方式和vue3组件通信方式对比： prop

站长

2024年09月28日 13:38 · 阅读数 20

带你重温经典知识之Vue篇，适合新手阅读，老手复习。

关注我，后续还会更新更多系列文章

vue2组件通信方式

props:可以实现父子组件、子父组件、甚至兄弟组件通信

自定义事件:可以实现子父组件通信

全局事件总线$bus：可以实现任意组件通信

pubsub:发布订阅模式实现任意组件通信

vuex:集中式状态管理容器，实现任意组件通信

ref:父组件获取子组件实例VC,获取子组件的响应式数据以及方法

slot:插槽(默认插槽、具名插槽、作用域插槽) 实现父子组件通信

vue3组件通信方式

props

props:可以实现父子组件通信, props数据是只读的

需要使用到defineProps方法去接受父组件传递过来的数据

defineProps是Vue3提供方法,不需要引入直接使用

父组件给子组件传递数据

<Child info="我爱祖国" :money="money"></Child>

defineProps的几种写法:

方式①（推荐）

let props = defineProps({
  info:{
   type:String,//接受的数据类型
   default:'默认参数',//接受默认数据
  },
  money:{
   type:Number,
   default:0
}})

方式②

let props = defineProps(["info",'money']);

方式③

const props = withDefaults(
    defineProps<{
        dateList: DateItem[];
        mode?: 'override' | 'ignore';
        disabled?: boolean;
    }>(),
    {
        dateList: () => [],
        mode: 'override',
    },
);

冒号知识

<AddModal
  width="700px" //通过attrs透传到孙组件身上
  :testValue="13" //表示绑定一个表达式，Vue 会将 13 解析为一个 JavaScript 数值，因此传递给子组件的 testValue 是一个数值类型。
  testValue="15" //传递的字符类型
  :testValue1="14px" //错误，绑定一个表达式，但14px表达式错误
  :testValue2="testValue2" //和:testValue2="MUST_BE_NUMBER"相同，都是找等号后面这个表达式
  />

子组件响应式变化

<Child :testValue2="testValue2"></Child>

如果testValue2是基本类型值，子组件无响应式，是ref、reactive，子组件才有响应式

如果是对象形式：

let testValue2 = { money: 123 };
setTimeout(() => {
  testValue2 = { test: 99 }; //子组件监听不到变更
  testValue2.money = 456 //能监听到
}, 5000);

注意：

在子组件中：let testRefValue = props.testValue;，testRefValue不会响应式变化（ref类型不会，对象内值的变化会监听到）

原因：在父子组件传值中，将ref定义的值 = props接收的值时，无法响应props中值的源头的变化（也就是父组件中值的变化）。因为 ref 是对传入数据的拷贝，但 toRef 是对传入数据的引用。因此可以使用toRef

！！当然，这只是针对父子组件传值，在同一个组件中，给一个ref变量赋值本身就相当于引用。参考

子组件通过emit调用修改事件，父组件通过prop再传递回来数据，子组件无法及时拿到更新

原因：异步问题，通过async await解决

父组件异步获取的值，prop传递到子组件，子组件无法渲染

原因：生命周期问题，注意生命周期，或者watch监听。参考

自定义事件

在props中已经提到：

在父组件内部给子组件(Event2)绑定一个自定义事件。

<Event2 @xxx="handler3"></Event2>

在Event2子组件内部触发这个自定义事件

<template>
  <div>
    <h1>我是子组件2</h1>
    <button @click="handler">点击我触发xxx自定义事件</button>
  </div>
</template>
<script setup lang="ts">
let emit = defineEmits(["xxx"]);
const handler = () => {
  emit("xxx", "法拉利", "茅台");
};
</script>

defineEmits方法执行，传递一个数组，数组元素即为将来组件需要触发的自定义事件类型，此方执行会返回一个$emit方法用于触发自定义事件。

当点击按钮的时候，事件回调内部调用$emit方法去触发自定义事件,第一个参数为触发事件类型，第二个、三个、N个参数即为传递给父组件的数据。

全局事件总线

全局事件总线可以实现任意组件通信，在vue2中可以根据VM与VC关系推出全局事件总线。但是在vue3中没有Vue构造函数，也就没有Vue.prototype.以及组合式API写法没有this,那么在Vue3想实现全局事件的总线功能就有点不现实啦，如果想在Vue3中使用全局事件总线功能可以使用插件mitt实现。

v-model

v-model指令: 收集表单数据，数据双向绑定。

父亲给子组件数据：props

子组件给父组件数据：自定义事件

引入子组件

<div>
    //<Child :modelValue="money” @update:modelValue="handler">/Child>
    //等同于：
    <Child v-model="money"></Child>
</div>

v-model指令可以收集表单数据(数据双向绑定)，除此之外它也可以实现父子组件数据同步。

而v-model实际是利用props[modelValue]与自定义事件[update:modelValue]实现的。

实战中：

<template>
  <BasicTable>
    <template #form-custom="{ model, field }">
      <createBusiness
        v-model:listValue="model[field]"
        :isCreat="false"
        businessKey="TEST_GPS"
        />
    </template>
  </BasicTable>
</template>

子组件中：

<template>
  <div>
    <input type="text" v-model="actionName" />
  </div>
</template>

<script setup>
const props = defineProps<{
    listValue: string;
    businessKey: string;
}>();

const emits = defineEmits(['update:listValue']);
  
const actionName = computed({
    get: () => {
        return props.listValue;
    },
    set: (newVal) => emits('update:listValue', newVal),
});
</script>

在vue3中一个组件可以通过使用多个v-model,让父子组件多个数据同步,下方代码相当于给组件Child传递两个props分别是pageNo与pageSize，以及绑定两个自定义事件update:pageNo与update:pageSize实现父子数据同步。

<Child v-model:pageNo="msg" v-model:pageSize="msg1"></Child>

useAttrs

useAttrs 返回的是一个对象，包含了所有未声明为 props 的属性。这些属性通常被称为“剩余属性”，因为它们在组件内部可能不会被直接使用，而是被传递到其他子组件或用于样式类等。

在Vue3中可以利用useAttrs方法获取组件的属性与事件(包含:原生DOM事件或者自定义事件),功能类似于Vue2框架中attrs属性与listeners方法。

比如:在父组件内部使用一个子组件my-button

<my-button type="success" size="small" title='标题' @click="handler"></my-button>

注意如果defineProps接受了某一个属性，useAttrs方法返回的对象身上就没有相应属性与属性值。

<script setup lang="ts">
    import {useAttrs} from 'vue';
    let $attrs = useAttrs();
</script>

ref与$parent

ref:可以获取真实的DOM节点，可以获取到子组件实例VC

$parent:可以在子组件内部获取到父组件的实例

在父组件挂载完毕获取组件实例

<template>
  <div>
    <h1>ref与$parent</h1>
    <Son ref="son"></Son>
  </div>
</template>
<script setup lang="ts">
    import Son from "./Son.vue";
    import { onMounted, ref } from "vue";
    const son = ref();
    onMounted(() => {
      console.log(son.value);
    });
</script>

但是需要注意，如果想让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露,因为vue3中组件内部的数据对外“关闭的”，外部不能访问。

<script setup lang="ts">
import { ref } from "vue";
//数据
let money = ref(1000);
//方法
const handler = ()=>{
}
defineExpose({
  money,
  handler
})
</script>

$parent 可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例，当然父组件的数据与方法需要通过 defineExpose 方法对外暴露。

<button @click="handler($parent)">点击我获取父组件实例</button>

provide与inject

provide[提供]

inject[注入]

vue3提供两个方法 provide 与 inject, 可以实现隔辈组件传递参数。

provide方法用于提供数据，此方法执需要传递两个参数, 分别提供数据的key与祖先组件提供数据value。

<script setup lang="ts">
    import {provide} from 'vue'
    provide('token','admin_token');
</script>

后代组件可以通过 inject 方法获取数据,通过 key 获取存储的数值。

<script setup lang="ts">
    import {inject} from 'vue'
    let token = inject('token');
</script>

pinia

pinia官网:

pinia.web3doc.top/

slot

插槽：默认插槽、具名插槽、作用域插槽可以实现父子组件通信.

1️⃣默认插槽:

在子组件内部的模板中书写slot全局组件标签

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
</script>

注意：开发项目的时候默认插槽一般只有一个。

2️⃣具名插槽：

顾名思义，此插槽带有名字在组件内部留多个指定名字的插槽。

子组件内部：

<template>
  <div>
    <h1>todo</h1>
    <slot name="a"></slot>
    <slot name="b"></slot>
  </div>
</template>
<script setup lang="ts">
</script>

父组件：

<template>
  <div>
    <h1>slot</h1>
    <Todo>
      <template v-slot:a>  //可以用#a替换
        <div>填入组件A部分的结构</div>
      </template>
      <template v-slot:b>//可以用#b替换
        <div>填入组件B部分的结构</div>
      </template>
    </Todo>
  </div>
</template>
 
<script setup lang="ts">
import Todo from "./Todo.vue";
</script>

3️⃣作用域插槽

作用域插槽：可以理解为，子组件数据由父组件提供，但是子组件内部决定不了自身结构与外观(样式)

子组件Todo代码如下:

<template>
  <div>
    <h1>todo</h1>
    <ul>
      <!--组件内部遍历数组-->
      <li v-for="(item,index) in todos" :key="item.id">
        <!--作用域插槽将数据回传给父组件-->
        <slot :$row="item" :$index="index"></slot>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
  defineProps(['todos']);//接受父组件传递过来的数据
</script>
<style scoped>
</style>

父组件内部代码如下:

<template>
  <div>
    <h1>slot</h1>
    <Todo :todos="todos">
      <template v-slot="{$row,$index}">
         <!--父组件决定子组件的结构与外观-->
         <span :style="{color:$row.done?'green':'red'}">{{$row.title}}</span>
      </template>
    </Todo>
  </div>
</template>
 
<script setup lang="ts">
import Todo from "./Todo.vue";
import { ref } from "vue";
//父组件内部数据
let todos = ref([
  { id: 1, title: "吃饭", done: true },
  { id: 2, title: "睡觉", done: false },
  { id: 3, title: "打豆豆", done: true },
]);
</script>
<style scoped>
</style>

转载自:https://juejin.cn/post/7418367865563201577