vue3（七）依赖注入 provide & mixins

依赖注入

父组件 使用 provide 提供数据

export default {
  data() {
    return {
      msg: 'foo'
    }
  },
  provide() {
    return {
      msg: this.msg
    }
  }
}

子组件 使用 inject 接受注入

export default {
  inject: ['foo'],
  created() {
    console.log(this.foo)
  }
}

mixins

mixins 选项接受一个 mixin 对象数组。这些 mixin 对象可以像普通的实例对象一样包含实例选项，它们将使用一定的选项合并逻辑与最终的选项进行合并。举例来说，如果你的 mixin 包含了一个 created 钩子，而组件自身也有一个，那么这两个函数都会被调用。

// 组件data和methods优先级高于mixin中的data优先级，组件和mixin数据同时存在的时候，使用组件中的data数据，如果组件内部没有data，使用mixin中的数据
// 声明周期函数，先执行mixin里面的，再执行组件里面的生命周期函数
const myMinxin = {
   data(){
       return {
           num: 2
       }
   },
   created(){
       console.log('mixin created')
   },
   methods:{
       handleClick(){
           console.log('mixin handleClick')
       }
   }
}


const app = Vue.createApp({
   data(){
       return {
           num: 1
       }
   },
   mixins:[myMinxin],
   methods:{
       handleClick(){
           console.log('handleClick')
       }
   },
   created(){
       console.log('created')
   },
   template:`<div>{{ num }}</div>
           <button @click="handleClick">点击</button>`
})

const vm = app.mount('#root')

extends

• 详细信息

  使一个组件可以继承另一个组件的组件选项。

  从实现角度来看，extends 几乎和 mixins 相同。通过 extends 指定的组件将会当作第一个 mixin 来处理。

  然而，extends 和 mixins 表达的是不同的目标。mixins 选项基本用于组合功能，而 extends 则一般更关注继承关系。

  同 mixins 一样，所有选项都将使用相关的策略进行合并。

const CompA = { ... }

const CompB = {
  extends: CompA,
  ...
}