Mixin

最新推荐文章于 2024-09-13 14:34:15 发布

luoluo2046

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量142

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/bjh_1994/article/details/108966637

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的混入（mixin）机制，包括如何定义混入、如何在组件中使用混入，以及混入与组件属性冲突时的处理规则。通过示例展示了Home组件和News组件如何共享msg属性和changeMsg方法。当混入和组件中有相同属性时，组件内的属性优先级高于混入中的属性。

摘要由CSDN通过智能技术生成

混入

1 加入多个组件需要用到相同的属性、方法、监听器、计算属性…此时就可以定义一个公共混入
2 定义混入混入的结构和组件结构一致
3 使用混入在需要使用混入的组件中增加mixins属性属性值为数组，数组里面放需要使用的混入（可以多个）
例如：

// Home组件和News组件都需要用到msg和changeMsg事件
//定义一个混入
const mixin1 = {
    data () {
      return {
        msg:"hello"
      }
    },
    methods: {
      changeMsg () {
        this.msg = "改变了"
      }
    }
  }
 let Home = {
    template:`
    <div>
      home组件
      {{ msg }}
      <button @click="changeMsg">按钮</button>
    </div>`,
    mixins:[mixin1]//将定义好的混入放到数组中
  }
  let News = {
    template:`
    <div>
      news组件
      {{ msg }}
    </div>`,
    mixins:[mixin1]//将定义好的混入放到数组中
  }
  Vue.component('Home',Home)
  Vue.component('News',News)
  let vm = new Vue({
    el:'#app',
    data: { 
    }
  })

注意

如果混入里面的属性与组件中的属性冲突时，则会优先使用组件中的属性

//混入中存在 msg 为  hello
 const mixin1 = {
    data () {
      return {
        msg:"hello"
      }
    },
    methods: {
      changeMsg () {
        this.msg = "改变了"
      }
    }
   }
   //此时Home组件中也存在 msg 为 123
   let Home = {
    data () {
      return {
        msg:123
      }
    },
    template:`
    <div>
      home组件
      {{ msg }}
      <button @click="changeMsg">按钮</button>
    </div>`,
    mixins:[mixin1]//将定义好的混入放到数组中
  }
// 此时msg在页面中显示的是Home组件中的msg 123