Informationen zu den Vorgängen „Extend“, „Mixins“, „Extends“, „Components“ und „Installieren“ in Vue

Dieser Artikel stellt hauptsächlich die Vorgänge zum Erweitern, Mixen, Erweitern und Installieren in Vue vor. Jetzt kann ich ihn mit Ihnen teilen.

Vorwort

Wissen Sie, wie man Extend, Mixins, Extensions, Components und Install verwendet?
Kennen Sie ihre Unterschiede?
Kennen Sie ihre Ausführungsreihenfolge?
Sie können diese Antworten finden unten.

1.Vue.extend

1. Verwenden Sie den Vue-Konstruktor, und der Parameter ist ein Objekt, das Komponentenoptionen enthält.

// 创建构造器
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')

Fazit:

Vue.extend erstellt tatsächlich einen Konstruktor, den entsprechenden Initialisierungskonstruktor, und montiert ihn auf dem Etikett

Github-Quellcode, bitte klicken Sie hier, willkommen bei Star

2.Vue.component

1. Registrieren Sie (Name) den von Vue.extend generierten Erweiterungsinstanzkonstruktor als

globale-Komponente, und der Parameter kann ein Vue.extend() sein. Erweiterung Eine Instanz oder ein Objekt (die Erweiterungsmethode wird automatisch aufgerufen) 2. Zwei Parameter, ein Komponentenname, ein Erweiterungskonstruktor oder ein Objekt

//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

Die Der Wert kann ein Array von Mix-Objekten sein, und die Mix-Instanz kann Optionen enthalten, die dieselben Optionen in der Erweiterung zusammenführen

Mixins-Code:

    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的方法

Schlussfolgerung:

1 werden ausgeführt: mixins>mixinTwo> ;erstellt (Lebenszyklus-Hook der Vue-Instanz);
2. Die Datenattribute in den Optionen wie Daten und Methoden überschreiben die vorherigen und die Lebenszyklus-Hooks werden alle ausgeführt

3.extends

Die Verwendung von Extends ist der von Mixins sehr ähnlich, außer dass die empfangenen Parameter einfache Optionsobjekte oder Konstruktoren sind, sodass Extends jeweils nur eine Komponente erweitern können

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里面的方法

Fazit:

1.erweitert die Ausführung. Die Reihenfolge lautet: erweitert>mixins>mixinTwo>erstellt
2. Die definierten Attributabdeckungsregeln stimmen mit mixins

4.components

Registrieren Sie eine lokale Komponente

//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. Der erste Parameter dieser Methode ist der Vue-Konstruktor und der zweite Parameter ein optionales Optionsobjekt (optional)

2.vue. Die Verwendungsmethode kann die Installationsmethode aufrufen, wodurch automatisch mehrere Registrierungen desselben Plug-Ins verhindert werden

 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 und Vue.component dienen zum Erstellen von Konstruktoren und Komponenten;

Mixins und Extends dienen zum Erweitern von Komponenten;

install dient zum Entwickeln der allgemeinen Sequenzbeziehung: Vue.extend> ;Vue.component>extends>mixins

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Zur Analyse von React-Komponenten und State|Props

Für config/index.js in vue :Detaillierte Erklärung der Konfiguration

Das obige ist der detaillierte Inhalt vonInformationen zu den Vorgängen „Extend“, „Mixins“, „Extends“, „Components“ und „Installieren“ in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!