vue3组件通信方式 二

目录

ref与$parent

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

$parent可以获取某一个组件的父组件实例VC 

案例 

provide与inject

provide提供数据

inject 获取数据

案例

pinia

大仓库

注册store

选择器api

组合式API

一组件使用

二组件使用

slot

默认插槽:

具名插槽：

案例

---

ref与$parent

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

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

父组件内部代码:

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

$parent可以获取某一个组件的父组件实例VC 

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

点击我获取父组件实例

案例 

父组件

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

子组件一

//组件内部数据对外关闭的，别人不能访问
//如果想让外部访问需要通过defineExpose方法对外暴露

子组件二

内部拥有一个按钮点击时候获取父组件实例，  $parent 父组件也要对外暴露

provide与inject

provide[提供]

inject[注入]

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

组件组件提供数据:

provide提供数据

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

inject 获取数据

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

案例

祖先组件

//vue3提供provide(提供)与inject(注入),可以实现隔辈组件传递数据

• //祖先组件给后代组件提供数据
• //两个参数:第一个参数就是提供的数据key
• //第二个参数:祖先组件提供数据

子组件

孙子组件

pinia

pinia官网:Pinia 中文文档

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

vuex

//vuex:集中式管理状态容器,可以实现任意组件之间通信！！！

//核心概念:state、mutations、actions、getters、modules

pinia 

//pinia:集中式管理状态容器,可以实现任意组件之间通信！！！

//核心概念:state、actions、getters

//pinia写法:选择器API、组合式API

刷新都会丢失数据！！！

大仓库

//createPinia方法可以用于创建大仓库

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

注册store

//引入仓库
import store from './store'
// 创建app
const app = createApp(App)
app.use(store)

 

选择器api

//第一个仓库:小仓库名字  第二个参数:小仓库配置对象

//defineStore方法执行会返回一个函数,函数作用就是让组件可以获取到仓库数据

//注意:函数没有context上下文对象

//没有commit、没有mutations去修改数据

//定义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;

组合式API

    //务必要返回一个对象:属性与方法可以提供给组件使用

//定义组合式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;

一组件使用

二组件使用

slot

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

默认插槽:

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

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

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

  
我是默认插槽填充的结构

具名插槽：

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

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

父组件内部向指定的具名插槽传递结构。需要注意v-slot：可以替换为#

作用域插槽

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

子组件Todo代码如下:

父组件内部代码如下: 

案例

父组件

子组件 默认插槽与具名插槽

子组件 作用域插槽