混合对象可以包含任意组件选项。组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项(读了两遍硬是没读懂啥意思)

Vue.extend()用以创建没有挂载的的子类,可以使用该子累创建多个实例

 var Profile = Vue.extend({
              template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
              data: function () {
                return {
                  firstName: 'Walter',
                  lastName: 'White',
                  alias: 'Heisenberg'
                }
              }
            })
            // 创建 Profile 实例,并挂载到一个元素上。
            new Profile().$mount('#mount-point')

mixins 将两个的对象的混合为一个数组,彼此都可以被调用,下面为演示代码及其结果

ps:当对象键值对 键名冲突时,保留非mixin对象的键值对

 <div id="app"></div>
        <script>
            var myMixin={
                template:'<h1>holle mixin</h1>',
                methods:{
                    hello:function(){
                        console.log('this is mixin')
                    },
                    say:function(){
                        console.log('I am mixin')
                    }
                }
            };

            var Component=Vue.extend({
                mixins:[myMixin],
                methods:{
                    lsit:function(){
                        console.log('I am lsit')
                    },
                    say:function(){
                         console.log('I am mixin say')
                    }
                }

            });
            var newcom=new Component().$mount('#app')
            newcom.hello();
            newcom.lsit();
            newcom.say();
        </script>

另一种mixin 方法

<div id="app"></div>
        <script>
            var myMixin={
                template:'<h1>holle mixin</h1>',
                methods:{
                    hello:function(){
                        console.log('this is mixin')
                    },
                    say:function(){
                        console.log('I am mixin')
                    }
                }
            };

            var app=new Vue({
                mixins:[myMixin],
                methods:{
                    lsit:function(){
                        console.log('I am lsit')
                    },
                    say:function(){
                         console.log('I am mixin say')
                    }
                }

            });

            app.hello();
            app.lsit();
            app.say();
</script>


Logo

前往低代码交流专区

更多推荐