小程序开发|小程序制作|小程序开发网 › 小程序开发 ›小程序开发经验 › 查看内容

Vue.js基础-13-混入对象（应用示例，同名函数优先级，选项合并，选项优先级，全局混入，Vue.mixin）

2023-8-29 13:02| 发布者: xiaoxiao| 查看: 215| 评论: 0

摘要: 1. 混入对象1.1 简单应用语法示例定义混入对象

1. 混入对象

1.1 简单应用

语法示例

定义混入对象

组件中引用混入对象

`完整示例`

          CROW-song

`1.2 定义一个组件引用混入对象`

`语法示例`

定义混入对象

定义一个组件来扩展vue实例

初始化组件实例

`完整示例`

          CROW-song

`2.3 混入对象使用函数`

`示例（在混入对象中直接定义函数）`

将上例替换如下：

`示例（混入对象引用methods中函数）`

          CROW-song

`2. 同名函数优先级（vue实例 VS 混入对象）`

`2.1 选项合并（实例下直接选项）`

`说明`

Vue 实例与混入对象包含了相同的方法。两个函数将合并，并且一起输出。

`完整示例`

          CROW-宋

结果输出

`2.2 选项优先级（实例下methods的选项）`

`说明`

Vue实例和混入对象实例中的methods下有同名函数，则Vue实中的methods下的同名函数优先级高

`完整示例`

说明：
混入对象：methods中包含两个方法，一个无同名的（mixinfunction），一个和vue实例中同名的（samemethod）。
vue实例：methods包含两个方法，一个无同名的（vmfunction），一个和混入对象中同名的（samemethod）。
按预期，mixinfunction、vmfunction和vue实例中的 samemethod 将被打印出来