À propos des opérations d'extension, de mixins, d'extensions, de composants et d'installation dans vue

Cet article présente principalement les opérations d'extension, de mixins, d'extensions, de composants et d'installation dans Vue. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Avant-propos.

Savez-vous comment utiliser extend, mixins, extends, composants et installer ?
Connaissez-vous leurs différences ?
Connaissez-vous leur ordre d'exécution
Vous pouvez trouver ces réponses ? ci-dessous.

1.Vue.extend

1. Utilisez le constructeur vue pour créer une sous-classe, et le paramètre est un objet contenant les options du composant
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')

Conclusion :

Vue.extend crée en fait un constructeur, le constructeur d'initialisation correspondant, et le monte sur l'étiquette

code source de github, veuillez cliquer ici, bienvenue sur star

2.Vue.component

1. Enregistrez (nom) le constructeur d'instance étendu généré par Vue.extend en tant que composant

global, et le paramètre peut être Vue.extend( ) Une instance d'extension, ou un objet (la méthode extend sera appelée automatiquement) 2. Deux paramètres, un nom de composant, un constructeur d'extension ou un objet

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

.

La valeur peut être un tableau d'objets mix, et l'instance mix peut contenir des options, qui fusionneront les mêmes options dans extend

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

Conclusion :

1 Exécution de .mixins L'ordre est mixins>mixinTwo>created (hook de cycle de vie de l'instance de vue);
2 Les attributs de données dans les options, tels que les données, les méthodes, écraseront les précédents et les hooks de cycle de vie le seront. tous être exécutés

3.extends

L'utilisation des extensions est très similaire à celle des mixins, sauf que les paramètres reçus sont de simples objets d'option ou des constructeurs, donc les extensions ne peuvent étendre qu'un composant à la fois

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

Conclusion ;

5.install

1 C'est un plug-in pour développer une vue. constructeur, et le deuxième paramètre est un objet d'option facultatif ( Facultatif)

2. La méthode vue.use peut appeler la méthode d'installation, ce qui empêchera automatiquement plusieurs enregistrements du même plug-in

6. La relation entre chaque méthode

//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
    }
  });

Vue. extend et Vue.component servent à créer des constructeurs et des composants ;

les mixins et extends servent à étendre les composants ; la relation de séquence globale : Vue.extend>Vue.component>extends>mixins

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention. au site Web PHP chinois !

 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'
  });

Recommandations associées :

Pour l'analyse des composants et des états React|props

Pour config/index.js dans vue :Explication détaillée de la configuration

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!