对象.install = function (Vue, options) {
        // 1. 添加全局过滤器
        Vue.filter(....)
    
        // 2. 添加全局指令
        Vue.directive(....)
    
        // 3. 配置全局混入(合)
        Vue.mixin(....)
    
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {...}
        Vue.prototype.$myProperty = xxxx
    }

插槽

使用插槽的情景

定义了子组件，在使用的时候传入的不仅仅是数据比如data等，而且会有标签(网页结构)的不同，比如传递视频、音频或者文章等等html内容

此时就可以在子组件标签中去传递相应的html内容，同时在子组件的定义中声明插槽的位置，这样在渲染时就会在该位置显示相应的html内容。

使用方法

VueX

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

使用场景

多个组件需要共享数据时，以一个全局单例模式管理，在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为。

使用

import { createApp } from 'vue'
import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp({ /* 根组件 */ })

// 将 store 实例作为插件安装
app.use(store)

在 Vue 组件中，可以通过 this.$store 访问store实例。

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

state 存放共享数据

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

actions 操作共享数据的API

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

mutations 操作共享数据的API

不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

生命周期图

待更新…

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/92748.html

Vue 总结四 (ref, mixin, 插件, 插槽, VueX)

ref

混入 mixin

插件

插槽