Vue3通信方式之ref、$parent、provide、inject、pinia和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中组件内部的数据对外“关闭的”，外部不能访问

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

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

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

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

3、pinia

pinia官网:https://pinia.web3doc.top/

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

4、slot

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

默认插槽:

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

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

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

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

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

具名插槽：

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

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

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

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