Vue|Vue 3 迁移策略笔记—— 第20节（Props 的默认值函数不能访问this）

2022-04-09 vue 3 迁移策略笔记 Prop

前言

本笔记主要基于官方文档《迁移策略—— Props 的默认值函数不能访问this》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。
知识储备

provide / inject

Props 默认值的工厂函数不再具有访问this的权限。
取而代之的是：

组件接收到的原始props将作为参数传递给默认值的函数
inject 可以在默认函数内部使用

import { inject } from 'vue'export default { props: { theme: { default (props) { // `props` 是传递给组件的原始值。 // 在任何类型/默认强制转换之前 // 也可以使用 `inject` 来访问注入的 property return inject('theme', 'default-theme') } } } }

本系列目录

Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组
Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件
Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）
Vue 3 迁移策略笔记——第4节：$attrs 包括class&style
Vue 3 迁移策略笔记—— 第5节：移除 $children
Vue 3 迁移策略笔记—— 第6节：自定义指令
Vue 3 迁移策略笔记—— 第7节：自定义元素交互
Vue 3 迁移策略笔记—— 第8节：Data 选项
Vue 3 迁移策略笔记—— 第9节：新增 emits 选项
Vue 3 迁移策略笔记—— 第10节：事件 API
【Vue|Vue 3 迁移策略笔记—— 第20节（Props 的默认值函数不能访问this）】Vue 3 迁移策略笔记—— 第11节：移除过滤器
Vue 3 迁移策略笔记—— 第12节：片段
Vue 3 迁移策略笔记—— 第13节：函数式组件
Vue 3 迁移策略笔记—— 第14节：全局 API
Vue 3 迁移策略笔记—— 第15节：全局 API 的 tree shaking
Vue 3 迁移策略笔记—— 第16节：Inline Template 属性
Vue 3 迁移策略笔记—— 第17节：Key 属性
Vue 3 迁移策略笔记—— 第18节：按键修饰符
Vue 3 迁移策略笔记—— 第19节：移除 $listeners
Vue 3 迁移策略笔记—— 第20节：Props 的默认值函数不能访问this
Vue 3 迁移策略笔记—— 第21节：渲染函数 API
Vue 3 迁移策略笔记—— 第22节：Slots 的统一
Vue 3 迁移策略笔记—— 第23节：Transition Class 的变化
Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素
Vue 3 迁移策略笔记—— 第25节：v-on.native修饰符被移除
Vue 3 迁移策略笔记—— 第26节：在组件上使用 v-model 的变化
Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级
Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为
Vue 3 迁移策略笔记—— 第29节：数组的监听

推荐阅读

上一篇：java实验报告（图形界面编程及文件读写）

下一篇：三高Mysql - 搭建“三高”架构之复制