Vue2与Vue3高级特性：ref、props、mixin与插件详解

本篇笔记主要介绍了Vue框架中的一些关键知识点，包括ref属性、配置项props、mixin（混合/注入）和插件的使用。 **ref属性** ref属性在Vue中扮演了动态引用元素或组件的重要角色，类似于HTML中的id，但它可以用于获取真实的DOM元素或组件实例。通过在HTML标签上使用`<h1 ref="xxx"></h1>`或`<school ref="xxx"></school>`，开发者可以在Vue组件内部通过`this.$refs.xxx`来访问这些元素或组件。它常用于处理用户交互时需要直接操作DOM的情况，但需要注意的是，ref属性的值不能改变，且Vue会监控props的变化，如果试图修改，可能会发出警告。 **配置项props** props允许组件之间传递数据，使得父组件能够向子组件传递数据。配置props有多种方式： 1. 基础使用：`<Demoname="xxx">`，仅接收一个名为"name"的属性。 2. 限制类型：`props: { name: String }`，指定name属性必须是字符串类型。 3. 限制类型、必要性与默认值：`props: { name: { type: String, required: true, default: '老王' } }`，定义了name属性为必填的字符串，并提供了默认值。 需要注意的是，props是只读的，任何对props的修改都会触发警告。如果业务需求确实需要修改，需将props的值复制到组件的data对象中进行操作。 **mixin（混合/注入）** mixin用于复用组件间的共享逻辑和行为。首先，创建一个混入对象，定义数据和方法等；然后，可以通过以下两种方式应用混入： - 全局混入：`Vue.mixin(xxx)`，将混入对象应用到所有组件。 - 局部混入：在组件导入混入对象后，使用`mixins: ['xxxx']`进行局部应用。 **插件** 插件是扩展Vue功能的核心机制，通常包含一个install方法，该方法接受Vue实例作为第一个参数，以及可能的配置选项。插件可以实现的功能包括添加全局过滤器、指令、全局混入、实例方法，甚至修改原型链上的方法（如`Vue.prototype.$myMethod`）。插件的定义通常是对象形式，如： ```javascript const myPlugin = { install(Vue, options) { // ... 插件功能实现 } }; ``` 通过调用插件的install方法并传入Vue实例和配置，可以增强Vue应用的功能性。