vue의 확장, 믹스인, 확장, 구성 요소 및 설치 작업 정보-JS 튜토리얼-php.cn

이 글은 Vue의 확장, 믹스인, 확장, 구성 요소 및 설치 작업을 주로 소개합니다. 이제는 모든 사람과 공유할 수 있습니다.

머리말

아시다시피 mixins, 확장, 구성 요소 설치 사용법을 알고 계시나요?
차이점을 아시나요?
실행 순서를 알고 계신가요?
아래에서 답변을 찾을 수 있습니다.

1.Vue.extend

1. 하위 클래스에서 매개변수는 구성요소 옵션을 포함하는 객체입니다.
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.comComponent

1에 오신 것을 환영합니다. Vue.extend에 의해 생성된 확장 인스턴스 생성자를 global 구성 요소로 등록(이름)하세요. 매개 변수는 Vue.extend( ) 확장 인스턴스이거나 객체(확장 메소드는 자동으로 호출됨)
2. 두 개의 매개변수, 구성 요소 이름, 확장 생성자 또는 객체

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

값은 혼합 객체의 배열일 수 있으며, 혼합 인스턴스는 옵션을 포함할 수 있습니다. 동일한 옵션이 확장
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>mixinTwo>생성됩니다(vue 인스턴스의 수명 주기 후크).
2.옵션 데이터 속성 데이터 및 메소드와 같은 데이터 및 메소드는 이전 것을 덮어쓰고 라이프 사이클 후크가 모두 실행됩니다

3.extends

확장의 사용법은 수신된 매개변수가 간단한 옵션 객체 또는 생성자라는 점을 제외하면 믹스인과 매우 유사하므로 Extensions는 한 번에 하나의 구성 요소만 확장할 수 있습니다

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.comComponents

//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입니다. 사용 방법 동일한 플러그인의 다중 등록을 자동으로 방지하는 설치 방법을 호출할 수 있습니다

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

로그인 후 복사