【Vue3+Ts项目】硅谷甄选 — vue3组件通信方式

最新推荐文章于 2024-09-11 08:00:00 发布

唧唧bong_

最新推荐文章于 2024-09-11 08:00:00 发布

阅读量1.2k

点赞数 29

分类专栏： vue3+ts项目记录《硅谷甄选》文章标签： vue.js 前端 javascript typescript

本文链接：https://blog.csdn.net/m0_67992720/article/details/134747528

版权

vue3+ts项目记录《硅谷甄选》专栏收录该内容

12 篇文章 8 订阅

订阅专栏

一、vue3组件通信方式

vue2组件通信方式：

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

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

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

pubsub：发布订阅模式实现任意组件通信（vue项目中较少使用）

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

ref：父组件获取子组件实例VC，获取子组件的响应式数据及方法

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

1.1 props

props可以实现父子组件通信，在vue3中我们可以通过 defineProps 获取父组件传递的数据。且在组件内部不需要引入defineProps方法，可以直接使用！

1.1.1 父组件给子组件传递数据

// 父组件中给子组件 Child 传数据--静态/动态数据
<Child info="我是静态数据" :money="money"></Child>

1.1.2 子组件获取父组件传递数据

1. 对象写法

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

2. 数组写法

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

PS：子组件获取到props数据就可以在模板中使用了，但是切记props是只读的(只能读取，不能修改)

1.2 自定义事件

在vue框架中事件分为两种：一种是原生的DOM事件，另外一种自定义事件。

原生DOM事件：可以让用户与网页进行交互，比如click、dbclick、change、mouseenter、mouseleave…
自定义事件：可以实现子组件给父组件传递数据

1.2.1 原生DOM事件

代码如下：

 <pre @click="handler">
      我是祖国的老花骨朵
 </pre>

当给pre标签绑定原生DOM事件点击事件，默认会给事件回调注入event事件对象。当然点击事件想注入多个参数可以按照下图操作。但是切记注入的事件对象务必叫做$event

  <div @click="handler1(1,2,3,$event)">我要传递多个参数</div>

在vue3框架click、dbclick、change(这类原生DOM事件)，不管是在标签、自定义标签上(组件标签)都是原生DOM事件。
vue2中却不是这样的，在vue2中组件标签需要通过native修饰符才能变为原生DOM事件。

1.2.2 自定义事件

自定义事件可以实现子组件给父组件传递数据，在项目中是比较常用的。

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

<!-- 绑定自定义事件xxx：实现子组件给父组件传递数据 -->
<Event2  @xxx="handler3"></Event2>

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

<template>
  <div>
    <h1>我是子组件2</h1>
    <button @click="handler">点击我触发xxx自定义事件</button>
  </div>
</template>

<script setup lang="ts">
// 利用defineEmits方法返回函数触发自定义事件
// defineEmits方法不需要引入，直接使用
let $emit = defineEmits(["xxx"]);
const handler = () => {
  // 第一个参数：事件类型  第二个|三个|N个参数为要传递给父组件的数据
  $emit("xxx", "数据①", "数据②");
};
</script>
<style scoped>
</style>

在script标签内部，使用了defineEmits方法，此方法是vue3提供的方法，不需要引入直接使用。defineEmits方法执行，传递一个数组，数组元素即为将来组件需要触发的自定义事件类型，此方执行会返回一个$emit方法用于触发自定义事件。

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

PS：正常说，组件标签书写@click应该为原生DOM事件，但是如果子组件内部通过defineEmits定义就变为自定义事件了，代码如下：

// 父组件
<Event2  @xxx="handler3" @click="handler"></Event2>

-------------------------------------------------

// 子组件
let $emit = defineEmits(["xxx",'click']);

1.3 全局事件总线

全局事件总线可以实现任意组件通信。

vue2和vue3实现全局事件总线方式

vue2：可以根据VM与VC关系推出全局事件总线。
vue3：在vue3中没有Vue构造函数，也就没有Vue.prototype. 以及组合式API写法没有this，如果想在Vue3中使用全局事件总线功能可以使用插件mitt实现。

mitt:官网地址：mitt - npm (npmjs.com)

在src目录下新建 bus/index.ts 文件

//引入mitt插件:mitt是一个方法,方法执行会返回bus对象
import mitt from 'mitt';
const $bus = mitt();
export default $bus;

子组件1接收子组件2传递的数据

<template>
  <div class="child1">
    <h3>我是子组件1</h3>
  </div>
</template>

<script setup lang="ts">
import $bus from "../../bus";
//组合式API函数
import { onMounted } from "vue";
//组件挂载完毕的时候,当前组件绑定一个事件,接收将来 子组件2 传递的数据
onMounted(() => {
  //第一个参数:即为事件类型  第二个参数:即为事件回调
  $bus.on("car", (car) => {
    console.log(car);
  });
});
</script>

子组件2给子组件1传递数据

<template>
  <div class="child2">
     <h2>我是子组件2</h2>
     <button @click="handler">点击我给兄弟送一台xxx</button>
  </div>
</template>

<script setup lang="ts">
//引入$bus对象
import $bus from '../../bus';
//点击按钮回调
const handler = ()=>{
  $bus.emit('car',{car:"xxx"});
}
</script>

1.4 v-model

v-model指令可实现收集表单数据(数据双向绑定)，除此之外它也可以实现父子组件数据同步。而v-model是利用props[modelValue]与自定义事件[update:modelValue]实现的。

1.4.1 单个v-model

下方代码：相当于给组件Child传递一个props(modelValue)与绑定一个自定义事件update:modelValue，实现父子组件数据同步。

// 父组件
<template>
  <div>
    <h1>v-model:钱数{{ money }}</h1>
    <hr/>
    <Child v-model="money"></Child>
    <!-- 
       v-model组件身上使用
       第一:相当有给子组件传递props[modelValue] = 10000
       第二:相当于给子组件绑定自定义事件update:modelValue
     -->
    <!-- 即相当于：<Child :modelValue="money" @update:modelValue="handler"></Child> -->
  </div>
</template>

<script setup lang="ts">
//引入子组件
import Child from "./Child.vue";
import { ref } from "vue";
//父组件的数据钱数
let money = ref(10000);
//自定义事件的回调
const handler = (num) => {
  //将来接受子组件传递过来的数据
  money.value = num;
};
</script>

// 子组件
<template>
  <div class="child">
    <h3>钱数:{{ modelValue }}</h3>
    <button @click="handler">父子组件数据同步</button>
  </div>
</template>

<script setup lang="ts">
//接受props
let props = defineProps(["modelValue"]);
let $emit = defineEmits(['update:modelValue']);
//子组件内部按钮的点击回调
const handler = ()=>{
   //触发自定义事件
   $emit('update:modelValue',props.modelValue+1000);
}
</script>

1.4.2 多个v-model

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

// 父组件
<template>
  <div>
    <h1>v-model:{{pageNo}}-{{pageSize}}</h1>
    <Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child1>
  </div>
</template>

<script setup lang="ts">
//引入子组件
import Child1 from "./Child1.vue";
import { ref } from "vue";
let info = ref("");
//父亲的数据
let pageNo = ref(1);
let pageSize = ref(3);
</script>

// 子组件
<template>
  <div class="child2">
    <h1>同时绑定多个v-model</h1>
    <button @click="handler">pageNo{{ pageNo }}</button>
    <button @click="$emit('update:pageSize', pageSize + 4)">
      pageSize{{ pageSize }}
    </button>
  </div>
</template>

<script setup lang="ts">
let props = defineProps(["pageNo", "pageSize"]);
let $emit = defineEmits(["update:pageNo", "update:pageSize"]);
//第一个按钮的事件回调
const handler = () => {
  $emit("update:pageNo", props.pageNo + 3);
};
</script>

PS：父组件中如果不用到子组件的参数，可以不用准备回调函数（子组件不用传数据给父组件），子组件直接触发就可以。

而使用v-model的话，相当于父组件准备了一个回调函数（其实没写，子组件接收时的名字我们自己定，如update:pageNo），然后传给子组件，子组件触发即可（注意是相当于！）

1.5 useAttrs

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

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

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

子组件内部可以通过useAttrs方法获取组件属性与事件。因此你也发现了，它类似于props，可以接收父组件传递过来的属性与属性值。

PS：如果defineProps接受了某一个属性，useAttrs方法返回的对象身上就没有相应属性与属性值。useAttrs属于兜底的操作。如果props接收了，那么useAttrs身上就没有了。props的优先级更高

// 子组件使用useAttrs接收父组件传的东西
<script setup lang="ts">
import {useAttrs} from 'vue';
/此方法执行会返回一个对象
let $attrs = useAttrs();

//万一用props接受title
let props =defineProps(['title']);
//props与useAttrs方法都可以获取父组件传递过来的属性与属性值
//但是props接收了，useAttrs方法就获取不到了
console.log($attrs); // 只有type和size
</script>

1.6 ref 与 $parent

1.6.1 ref

ref，提及到ref可能会想到它可以获取元素的DOM或者获取子组件实例的VC。既然可以在父组件内部通过ref获取子组件实例VC，那么子组件内部的方法与响应式数据，父组件是可以使用的。

比如：在父组件挂载完毕获取子组件实例

父组件内部代码:

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

1.6.2 $parent

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

// 子组件中---注入$parent，必须叫这个；同时父组件的数据也要对外暴露
<button @click="handler($parent)">点击我获取父组件实例</button>

1.7 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>

1.8 pinia

pinia官网：Home | Pinia 中文文档 (web3doc.top)

pinia也是集中式管理状态容器，类似于vuex。但是核心概念没有mutation、modules，使用方式参照官网。

缺点：与vuex一样，存储的数据并非持久化，刷新页面会丢失。

创建大仓库：在src目录下新建store/index.ts文件

//创建大仓库
import { createPinia } from 'pinia';
//createPinia方法可以用于创建大仓库
let store = createPinia();
//对外暴露,安装仓库
export default store;

在入口文件引入大仓库

入口文件：main.js

//引入仓库
import store from './store'
app.use(store)

1.8.1 pinia选择式API写法

创建小仓库：在store下新建 modules/info.ts 文件

//定义info小仓库
import { defineStore } from "pinia";
//第一个参数:小仓库名字  第二个参数:小仓库配置对象
//defineStore方法执行会返回一个函数,函数作用就是让组件可以获取到仓库数据
let useInfoStore = defineStore("info", {
    //存储数据:state
    state: () => {
        return {
            count: 99,
            arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        }
    },
    actions: {
        //注意:函数没有context上下文对象
        //没有commit、没有mutations去修改数据
        updateNum(a: number, b: number) {
            this.count += a;
        }
    },
    getters: {
        total() {
            let result:any = this.arr.reduce((prev: number, next: number) => {
                return prev + next;
            }, 0);
            return result;
        }
    }
});
//对外暴露方法
export default useInfoStore;

在组件中获取/修改仓库数据

<template>
  <div class="child">
    <h1>{{ infoStore.count }}---{{infoStore.total}}</h1>
    <button @click="updateCount">点击我修改仓库数据</button>
  </div>
</template>

<script setup lang="ts">
import useInfoStore from "../../store/modules/info";
//获取小仓库对象
let infoStore = useInfoStore();
console.log(infoStore);
//修改数据方法
const updateCount = () => {
  //仓库调用自身的方法去修改仓库的数据
  infoStore.updateNum(66,77);
  //直接修改仓库数据
  infoStore.count++
  // 通过 $patch修改仓库数据
  infoStore.$patch({
    count: 1111
  })
};
</script>

1.8.2 pinia组合式API写法

创建小仓库：在store下新建 modules/todo.ts 文件

PS：组合式API中的getters可以通过computed实现，甚至可以通过watch实现。

//定义组合式API仓库
import { defineStore } from "pinia";
import { ref, computed, watch} from 'vue';
//创建小仓库
let useTodoStore = defineStore('todo', () => {
    let todos = ref([{ id: 1, title: '吃饭' }, { id: 2, title: '睡觉' }, { id: 3, title: '打豆豆' }]);
    let arr = ref([1,2,3,4,5]);

    const total = computed(() => {
        return arr.value.reduce((prev, next) => {
            return prev + next;
        }, 0)
    })
    //务必要返回一个对象:属性与方法可以提供给组件使用
    return {
        todos,
        arr,
        total,
        updateTodo() {
            todos.value.push({ id: 4, title: '组合式API方法' });
        }
    }
});

export default useTodoStore;

在组件中获取/修改仓库数据

<template>
  <div class="child1">
    {{ infoStore.count }}
    <p @click="updateTodo">{{ todoStore.arr }}{{todoStore.total}}</p>
  </div>
</template>

<script setup lang="ts">
//引入组合式API函数仓库
import useTodoStore from "../../store/modules/todo";
let todoStore = useTodoStore();

//点击p段落去修改仓库的数据
const updateTodo = () => {
  todoStore.updateTodo();
};
</script>

1.9 slot

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

1.9.1 默认插槽

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

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

在父组件内部提供结构：Todo即为子组件，在父组件内部使用的时候，在双标签内部书写结构传递给子组件。

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

<Todo>
  <h1>我是默认插槽填充的结构</h1>
</Todo>

1.9.2 具名插槽

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

下面是一个子组件内部，模板中留两个插槽

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

<style scoped>
</style>

父组件内部向指定的具名插槽传递结构

PS：" v-slot:"可以替换为"#"

<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>
<style scoped>
</style>

1.9.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>