其他分享
首页 > 其他分享> > Vue中的mixins

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