Vue3+TypeScript学习笔记(十九)

简介: 本节记录依赖注入provide/inject相关的知识
  1. provide/inject类似发布/订阅通知,主要作用是在爷孙组件之间传递信息(父子也可以接收到,但还是建议使用props)
  2. provide发布的数据也是响应式的,但是在TS中如果不做显式类型限制将会被视为unknow,比如我们要订阅一个color数据,应该写成这种形式:

显式指定inject的数据类型

import type { Ref } from 'vue'
let colorVal = inject<Ref<string>>('color')        // 这样colorVal的类型会变为Ref<string> | undefined
  1. 简单的发布——订阅系统,修改颜色。注:Vue3针对css做了优化,在css中可以直接用v-bind函数绑定脚本中的数据

App.vue(爷组件,发布者)

<template>
    <div class="section">
        <h1>App.vue(爷爷级别)</h1>
        <div>
            <!-- 靠name来约束,相同的name只有一个input能被激活 -->
            <label><input v-model="colorVal" type="radio" name="color" value="red">红色</label>
            <label><input v-model="colorVal" type="radio" name="color" value="green">绿色</label>
            <label><input v-model="colorVal" type="radio" name="color" value="blue">蓝色</label>
            <div class="background"></div>
        </div>
    </div>
    <A></A>
    <B></B>
</template>

<script setup lang="ts">
import { ref, reactive,provide,readonly } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue';
import type { Ref } from 'vue';

let colorVal = ref<string>('red')
provide<Ref<string>>('color',readonly(colorVal))
</script>

<style scoped>
.section {
    height: 190px;
    border: 1px solid #ccc;
}
.background {
    width: 50px;
    height: 50px;
    margin: 15px 0 0 10px;
  // Vue3针对css的优化:可以用v-bind绑定脚本中的数据
    background-color: v-bind(colorVal);
}
</style>

A.vue(父组件,订阅者)

<template>
    <div class="section">
        <h2>A.vue(父亲级别)</h2>
        <div class="background"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, inject } from 'vue'
import type { Ref } from 'vue'

let colorVal = inject<Ref<string>>('color')
</script>

<style scoped>
.section {
    height: 190px;
    border: 1px solid #ccc;
}
.background {
    width: 50px;
    height: 50px;
    margin: 15px 0 0 10px;
    background-color: v-bind(colorVal);
}
</style>

B.vue(孙组件,订阅者)

<template>
    <div class="section">
        <h2>B.vue(孙子级别)</h2>
        <div class="background"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, inject } from 'vue'
import type { Ref } from 'vue'

let colorVal = inject<Ref<string>>('color')
    // 使用非空运算符!
colorVal!.value = 'blue'
</script>

<style scoped>
.section {
    height: 190px;
    border: 1px solid #ccc;
}
.background {
    width: 50px;
    height: 50px;
    margin: 15px 0 0 10px;
    background-color: v-bind(colorVal);
}
</style>
  1. 在父子组件中可以修改colorVal的值,并且这种改变会影响其他所有使用到这个值的组件(发布者也受影响),如果不想让父子组件修改可以引入一个readonly函数,在发布时使用即可

App.vue

<script setup lang="ts">
import { ref, reactive,provide,readonly } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue';
import type { Ref } from 'vue';

let colorVal = ref<string>('red')
// 在发布时写上readonly(发布内容)即可,这样后代组件尝试修改时vue会报警告
provide<Ref<string>>('color',readonly(colorVal))
</script>
  1. colorVal如果为undefined则可选链操作符将不起作用,这时可以使用!非空运算符或设置默认值来规避掉undefined的问题

B.vue(孙组件)

// 错误示范
<script setup lang="ts">
import { ref, reactive, inject } from 'vue'
import type { Ref } from 'vue'

let colorVal:Ref<string>|undefined = inject<Ref<string>>('color')
// 爆红,可选链操作符不可用
colorVal?.value = 'blue'
</script>


// 解决方案1:非空运算符!
<script setup lang="ts">
import { ref, reactive, inject } from 'vue'
import type { Ref } from 'vue'

let colorVal = inject<Ref<string>>('color')
// 使用非空运算符!
colorVal!.value = 'blue'
</script>


// 解决方案2:设置默认值
<script setup lang="ts">
import { ref, reactive, inject } from 'vue'
import type { Ref } from 'vue'

// 设置默认值
let colorVal = inject<Ref<string>>('color',ref('red'))
colorVal.value = 'blue'
</script>
相关文章
|
4天前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
12 3
|
4天前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
12 1
|
17天前
|
资源调度 JavaScript 前端开发
Vue3+TypeScript前端项目新纪元:揭秘高效事件总线Mitt,轻松驾驭组件间通信的艺术!
【8月更文挑战第3天】Vue3结合TypeScript强化了类型安全与组件化开发。面对大型应用中复杂的组件通信挑战,可通过引入轻量级事件发射器Mitt实现事件总线模式。Mitt易于集成,通过简单几步即可完成安装与配置:安装Mitt、创建事件总线实例、并在组件中使用`emit`与`on`方法发送及监听事件。此外,利用TypeScript的强大类型系统确保事件处理器正确无误。这种方式有助于保持代码整洁、解耦组件,同时提高应用的可维护性和扩展性。不过,在大规模项目中需谨慎使用,以防事件流过于复杂难以管理。
33 1
|
19天前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
19天前
|
开发框架 前端开发 JavaScript
在Vue3+TypeScript 前端项目中使用事件总线Mitt
在Vue3+TypeScript 前端项目中使用事件总线Mitt
|
11天前
|
JavaScript 测试技术 API
Vue 3 与 TypeScript:最佳实践详解
Vue 3 与 TypeScript:最佳实践详解
|
17天前
|
JavaScript 前端开发 API
Vue 3+TypeScript项目实战:解锁vue-next-admin中的全局挂载对象接口,让跨组件共享变得高效而优雅!
【8月更文挑战第3天】在构建Vue 3与TypeScript及vue-next-admin框架的应用时,为提高多组件间共享数据或方法的效率和可维护性,全局挂载对象接口成为关键。本文通过问答形式介绍其必要性和实现方法:首先定义全局接口及其实现,如日期格式化工具;接着在`main.ts`中通过`app.config.globalProperties`将其挂载;最后在组件内通过Composition API的`getCurrentInstance`访问。这种方式简化了跨组件通信,增强了代码复用性和维护性。
12 0
|
1月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
8天前
|
JavaScript
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
19 4
|
12天前
|
JavaScript 编译器
typescript 解决变量多类型访问属性报错--工作随记
typescript 解决变量多类型访问属性报错--工作随记