mixin和组件的区别:组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立;而mixins在引入组件之后相当于父组件的各种属性方法都被扩充了,会将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。
本教程操作环境:windows7系统、vue3版,DELL G3电脑。
什么是Mixin?
混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
混合对象可以包含任意组件选项。
当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。【相关推荐:vuejs视频教程、web前端开发】
mixin和组件的区别
组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。
而mixins则是在引入组件之后,则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。
单纯组件引用:
父组件 + 子组件 >>> 父组件 + 子组件
mixins:
父组件 + 子组件 >>> new父组件
有点像注册了一个vue的公共方法,可以绑定在多个组件或者多个Vue对象实例中使用。另一点,类似于在原型对象中注册方法,实例对象即组件或者Vue实例对象中,仍然可以定义相同函数名的方法进行覆盖,有点像子类和父类的感觉。
mixins和vuex区别
Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。如果相同对象,组件会覆盖mixins
vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。
mixins的使用
1、首先创建一个js文件,例如elTableAdsorbent.js
export const elTableAdsorbent = { data() { return { count:10 } }, methods: { // 显示页面中所有内容 handleCount() { this.count++ } }
或者
// 定义一个混入对象 var myMixin = { data(){ return{ parent: 405 } }, mounted: function () { this.hello() }, methods: { hello: function () { console.log(this.parent, 'hello from mixin!') } } }
2、然后在需要此需求的vue页面引入并且使用
<el-button type="primary" @click="handleCount">{{count}}</el-button> import { elTableAdsorbent } from '@/utils/mixin/elTableAdsorbent' export default { mixins: [elTableAdsorbent], data() { return {} }, created(){}, methods:{}, watch:{} }
3、同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
var mixin = { created: function () { console.log('混入对象的钩子被调用') } } new Vue({ mixins: [mixin], created: function () { console.log('组件钩子被调用') } }) // => "混入对象的钩子被调用" // => "组件钩子被调用"
4、两个对象键名冲突时,取组件对象的键值对。
var mixin = { methods: { conflicting: function () { console.log('from mixin') } } } var vm = new Vue({ mixins: [mixin], methods: { conflicting: function () { console.log('from self') } } }) vm.conflicting() // => "from self"
mixins的应用
var install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 3. 注入组件 Vue.mixin({ created: function () { // 逻辑... } ... }) // 4. 添加实例方法 Vue.prototype.$myMethod = function (options) { // 逻辑... } }
以上就是vue中mixin和组件的区别是什么的详细内容,更多请关注php中文网其它相关文章!
已抢26937个
抢已抢14317个
抢已抢7194个
抢已抢8808个
抢已抢17643个
抢已抢7107个
抢