vue中的mixin的混入规则

    科技2022-08-15  107

    当组件和混入对象有同名选项时,这些选项会以恰当的方式合并

    数据 data 数据对象在混入时,会进行合并,发生冲突是,保留组件的数据

    值为对象 methods computed等 在混入时,同名的methods会合并成为一个对象 如果对象的键名发生冲突,则保留组件对象的键值对

    生命周期钩子函数 同名的钩子函数会被合并为一个数组,依次都会被调用,但是混入对象的钩子函数先被调用

    代码:

    html代码: <div id="app"> {{num}} //99 如果实例中没有num就用混入中的num <my-div></my-div> </div> js代码: var mixin={ data(){ return { num:10 } }, created(){ alert("mixin--alert"); //alert两次 因为混入了两次 } } new Vue({ el:'#app', data:{ num:99 }, methods:{}, mixins:[mixin], components:{ 'my-div':{ data(){ return { num:100 } }, mixins:[mixin], methods:{}, template:` <div> <p>{{num}}</p> //100 如果组件中没有num 就用混入的num=10 </div> ` } } }); }
    Processed: 0.016, SQL: 8