Vue3通信方式之ref、$parent、provide、inject、pinia和slot

r囧r小猫 2023-10-12 19:33 7阅读 0赞

#### 目录 ####

*   *   *  1、ref与$parent
         *  2、provide与inject
         *  3、pinia
         *  4、slot

#### 1、ref与$parent ####

> ref可以获取元素的DOM或者获取可以在父组件内部通过ref获取子组件实例， 子组件内部的方法与响应式数据父组件可以使用的。

> 比如:在父组件挂载完毕获取组件实例

父组件内部代码:

<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中组件内部的数据对外“关闭的”，外部不能访问

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

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

#### 2、provide与inject ####

> provide\[提供\]

> inject\[注入\]

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

组件组件提供数据:

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

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

#### 3、pinia ####

pinia官网:[https://pinia.web3doc.top/][https_pinia.web3doc.top]

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

#### 4、slot ####

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

默认插槽:

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

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

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

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

具名插槽：

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

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

父组件内部向指定的具名插槽传递结构。需要注意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>

作用域插槽

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

子组件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_pinia.web3doc.top]: https://pinia.web3doc.top/