vueでのextend、mixins、extends、components、installの操作について

この記事では、主に Vue での extend、mixins、extends、components、install の操作を紹介します。必要な友達はそれを参照できるように共有します。 mixins、extend、コンポーネント、インストールの使用法をご存知ですか?

それらの違いをご存知ですか?

それらの実行順序を知っていますか?

これらの答えは以下で見つけることができます。

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 によって生成された拡張インスタンス コンストラクターを

global

コンポーネントとして登録 (名前) します。パラメーターは Vue.extend( ) 拡張インスタンス、またはオブジェクト (extend メソッドが自動的に呼び出されます)

2. 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. 値は混合オブジェクトの配列にすることができ、混合インスタンスにはオプションを含めることができます。同じオプションは extendmixins コードにマージされます:

    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.オプションのデータ属性内データやメソッドなどは以前のものを上書きし、ライフサイクルフックはすべて実行されます

3.extends

extends の使用法は、受け取ったパラメーターが単純なオプションオブジェクトまたはコンストラクターであることを除いて、ミックスインと非常によく似ています。 extends は一度に 1 つのコンポーネントしか拡張できません

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 コンストラクターであり、2 番目のパラメータはオプションのオプションオブジェクト (オプション)

2.vue です。 use メソッド install メソッドを呼び出すと、同じプラグインの複数の登録が自動的に防止されます

Vue.extend と Vue.component の関係は、コンストラクターとコンポーネントを作成するためのものです。

ミックスインextends はコンポーネントを拡張するためのものです。

install は開発プラグインです。Vue.extend>Vue.component>extends>mixins

以上がこの記事の内容全体です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

React コンポーネントと state|props の分析については

config/index.js の詳細な説明については: vue での設定

以上がvueでのextend、mixins、extends、components、installの操作についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。