Vue中的mixins

Vue中的mixins

一、混入规则
1.data
同名已组件为准

data(){
	return {}
}

2.create 等钩子函数
先运行mix,再运行组件内
3.methods,components等
同名，以组件为准

二、局部混入和全局混入
1.局部混入
创建mixin.js文件，在需要的组件或者页面引入

import mixin from '../../mixins/mixin'
export default{
	mixins:[mixin],
	data(){
		return {}
	}
	mounted(){
	this.mixinMethod()
}
}

2.全局混入
分为2种情况
一种是普通的html中引入，直接

Vue.mixin({
	methods:{
		mixinOne:function(){
			console.log('mixinOne')
		}
}
})

二种，在vue项目中，则可以在main.js中引入，页面组件中直接通过this，访问混入的组件和方法即可
注意：全局混合被注册到了每个单一组件上。它们的使用场景及其有限要小心。

Vue.mixin({
    mounted() {
        console.log("我是mixin");
    }
})

new Vue({
    ...
})

console.log将会出现在每个组件上。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

混合很好，它不需要传递状态，但是这种模式当然也可能会被滥用。所以我们还是需要仔细斟酌使用喽！！
例子

import {mapGetters} from 'vuex'

// 目的是想要处理 scroll 的bottom值，在含有playlist列表的情况下
export const playlistMixin = {
  computed: {
    ...mapGetters([
      'playList'
    ])
  },
  mounted() {
    this.handlePlaylist(this.playList)
  },
  activated() {
    this.handlePlaylist(this.playList)
  },
  watch: {
    playlist(newVal) {
      this.handlePlaylist(newVal)
    }
  },
  methods: {
    // 如果组件中没有这个方法，那么就报错
    handlePlaylist() {
      throw new Error('component must implement handlePlaylist method')
    }
  }
}

混入在什么情景需要用到？
mixins的作用可能和vuex，公共组件这2有点像
使用：
当我们存在多个组件中的数据或者功能很相近时，就可以使用mixins将公共部分提取出来，通过mixins封装的函数，组件调用他们是不会改变函数作用域外部的。

mixins和vuex的区别：
vuex公共状态管理，在一个组件被引入后，如果该组件改变了vuex里面的数据状态，
其他引入vuex数据的组件也会对应修改，所有的vue组件应用的都是同一个vuex数据。(在js中，有点类似于浅拷贝)
vue引入mixins数据，mixins数据或方法，在每一个组件中都是独立的，互不干扰的，都输入vue组件自身。(在js中，有点类似于深拷贝)

mixins和公共组件的区别;
通用的数据和方法，确实可以提出一个通用的组件，由父子组件传参的形式进行分享公用
公共组件最主要的作用还是复用相同的vue组件(有视图，有方法，有状态)
如果只是提取公用的数据或者方法，并且这些数据或者方法，不需要组件间进行维护，就可以使用mixins。(类似于js中封装的一些公用的方法)

合并可以分为
一、数据对象内
二、钩子函数
三、值为对象的选项
下次重新更新以上写法

标签：Vue,mixins,mixin,组件,vuex,myOption
来源： https://blog.csdn.net/qq_34941404/article/details/122414725