首頁 > 文章 > web前端 > 關於vue中extend,mixins,extends,components,install的操作

關於vue中extend,mixins,extends,components,install的操作

不言原創: 2018-07-13 15:18:242388瀏覽

這篇文章主要介紹了關於vue中extend,mixins,extends,components,install的操作，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

前言

你知道extend,mixins,extends，components,install用法嗎?
你知道他們的區別嗎?
你知道他們的執行順序嘛?
下面都能找到這些答案.

1.Vue.extend

1.使用vue建構器,建立一個子類別,參數是包含元件選項的物件;
2.是全域的

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{extendData}}</br>实例传入的数据为:{{propsExtend}}</p>',//template对应的标签最外层必须只有一个标签
  data: function () {
    return {
      extendData: '这是extend扩展的数据',
    }
  },
  props:['propsExtend']
})
// 创建 Profile 实例，并挂载到一个元素上。可以通过propsData传参.
new Profile({propsData:{propsExtend:'我是实例传入的数据'}}).$mount('#app-extend')

結論:
Vue.extend實際上是建立一個建構器,對應的初始化建構器,並將其掛載到標籤上

github原始碼,請戳這裡,歡迎star

2.Vue.component

1.將透過Vue.extend 產生的擴充實例建構器註冊（命名）為一個全域元件,參數可以是Vue.extend()擴展的實例,也可以是物件(會自動呼叫extend方法)
2.兩個參數,一個元件名稱,一個extend建構器或物件

//1.创建组件构造器
  var obj = {
    props: [],
    template: '<p><p>{{extendData}}</p></p>',//最外层只能有一个大盒子,这个和<tempalte>对应规则一致
    data: function () {
      return {
        extendData: '这是Vue.component传入Vue.extend注册的组件',
      }
    },
  };

  var Profile = Vue.extend(obj);

  //2.注册组件方法一:传入Vue.extend扩展过得构造器
  Vue.component('component-one', Profile)

  //2.注册组件方法二:直接传入
  Vue.component('component-two', obj)

  //3.挂载
  new Vue({
    el: '#app'
  });

  //获取注册的组件 (始终返回构造器)
  var oneComponent=Vue.component('component-one');
  console.log(oneComponent===Profile)//true,返回的Profile构造器

3.mixins

值可以是混合物件陣列,混合實例可以包含選項,將在extend將相同的選項合併
mixins程式碼:

    var mixin={
    data:{mixinData:'我是mixin的data'},
    created:function(){
      console.log('这是mixin的created');
    },
    methods:{
      getSum:function(){
        console.log('这是mixin的getSum里面的方法');
      }
    }
  }

  var mixinTwo={
    data:{mixinData:'我是mixinTwo的data'},
    created:function(){
      console.log('这是mixinTwo的created');
    },
    methods:{
      getSum:function(){
        console.log('这是mixinTwo的getSum里面的方法');
      }
    }
  } 

  var vm=new Vue({
    el:'#app',
    data:{mixinData:'我是vue实例的data'},
    created:function(){
      console.log('这是vue实例的created');
    },
    methods:{
      getSum:function(){
        console.log('这是vue实例里面getSum的方法');
      }
    },
    mixins:[mixin,mixinTwo]
  })
  
  //打印结果为:
  这是mixin的created
  这是mixinTwo的created
  这是vue实例的created
  这是vue实例里面getSum的方法

結論:
1.mixins執行的順序為mixins>mixinTwo> ;created(vue實例的生命週期鉤子);
2.選項中資料屬性如data,methods,後面執行的回覆蓋前面的,而生命週期鉤子都會執行

3.extends

extends用法和mixins很相似,只不過接收的參數是簡單的選項物件或建構子,所以extends只能單次擴充一個元件

var extend={
    data:{extendData:'我是extend的data'},
    created:function(){
      console.log('这是extend的created');
    },
    methods:{
      getSum:function(){
        console.log('这是extend的getSum里面的方法');
      }
    }
  }

  var mixin={
    data:{mixinData:'我是mixin的data'},
    created:function(){
      console.log('这是mixin的created');
    },
    methods:{
      getSum:function(){
        console.log('这是mixin的getSum里面的方法');
      }
    }
  }
  
    
  var vm=new Vue({
    el:'#app',
    data:{mixinData:'我是vue实例的data'},
    created:function(){
      console.log('这是vue实例的created');
    },
    methods:{
      getSum:function(){
        console.log('这是vue实例里面getSum的方法');
      }
    },
    mixins:[mixin],
    extends:extend
  })
  
  //打印结果
  这是extend的created
  这是mixin的created
  这是vue实例的created
  这是vue实例的getSum里面的方法

結論:
1.extends執行順序為:extends>mixins>mixinTwo>created
2.定義的屬性覆寫規則和mixins一致

4.components

註冊一個局部元件

//1.创建组件构造器
  var obj = {
    props: [],
    template: '<p><p>{{extendData}}</p></p>',//最外层只能有一个大盒子,这个和<tempalte>对应规则一致
    data: function () {
      return {
        extendData: '这是component局部注册的组件',
      }
    },
  };

  var Profile = Vue.extend(obj);
  
  //3.挂载
  new Vue({
    el: '#app',
    components:{
      'component-one':Profile,
      'component-two':obj
    }
  });

5 .install

1.是開發vue的插件,這個方法的第一個參數是Vue 建構器，第二個參數是一個可選的選項物件(可選)
2.vue. use方法可以呼叫install方法,會自動阻止多次註冊相同插件

 var MyPlugin = {};
  MyPlugin.install = function (Vue, options) {
    // 2. 添加全局资源,第二个参数传一个值默认是update对应的值
    Vue.directive('click', {
      bind(el, binding, vnode, oldVnode) {
        //做绑定的准备工作,添加时间监听
        console.log('指令my-directive的bind执行啦');
      },
      inserted: function(el){
      //获取绑定的元素
      console.log('指令my-directive的inserted执行啦');
      },
      update: function(){
      //根据获得的新值执行对应的更新
      //对于初始值也会调用一次
      console.log('指令my-directive的update执行啦');
      },
      componentUpdated: function(){
      console.log('指令my-directive的componentUpdated执行啦');
      },
      unbind: function(){
      //做清理操作
      //比如移除bind时绑定的事件监听器
      console.log('指令my-directive的unbind执行啦');
      }
    })

    // 3. 注入组件
    Vue.mixin({
      created: function () {
        console.log('注入组件的created被调用啦');
        console.log('options的值为',options)
      }
    })

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
      console.log('实例方法myMethod被调用啦');
    }
  }

  //调用MyPlugin
  Vue.use(MyPlugin,{someOption: true })

  //3.挂载
  new Vue({
    el: '#app'
  });

6.各個方法之間的關係

Vue.extend和Vue.component是為了創建建構器和元件;
mixins和extends是為了拓展元件;
install是開發外掛; 總的順序關係: Vue.extend>Vue.component>extends>mixins

以上就是本文的全部內容，希望以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！