vueでのextend、mixins、extends、components、installの操作について-jsチュートリアル-php.cn

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

不言

リリース： 2018-07-13 15:18:24

オリジナル

2456 人が閲覧しました

この記事では、主に 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