Vue에 대해 자세히 알아보십시오.js 혼입 (mixins)

2761 단어 vue섞여 들어가다mixins
혼입 (mixins) 은 일부 복용 가능한 방법이나 계산 속성을 정의합니다.혼합 객체에는 구성 요소 옵션이 포함될 수 있습니다.구성 요소가 혼합 대상을 사용할 때, 모든 혼합 대상의 옵션은 이 구성 요소 자체의 옵션으로 혼합됩니다.
간단한 인스턴스 보기:

var vm = new Vue({
  el: '#databinding',
  data: {
  },
  methods : {
  },
});
//  
var myMixin = {
  created: function () {
    this.startmixin()
  },
  methods: {
    startmixin: function () {
      document.write(" ");
    }
  }
};
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component();
옵션 병합
구성 요소와 혼합 대상에 같은 이름의 옵션이 있을 때, 이 옵션들은 적당한 방식으로 혼합될 것이다.
예를 들어 데이터 대상은 내부에서 얕은 합병(일층 속성 깊이)을 하고 구성 요소의 데이터와 충돌할 때 구성 요소 데이터를 우선한다.
다음 인스턴스에서 Vue 인스턴스는 혼합 객체와 동일한 방법을 포함합니다.출력 결과에서 두 가지 옵션이 합쳐진 것을 알 수 있다.

var mixin = {
  created: function () {
    document.write(' ' + '<br>')
  }
}
new Vue({
  mixins: [mixin],
    created: function () {
    document.write(' ' + '<br>')
  }
});
출력 결과:
혼입 호출
구성 요소 호출
methods 옵션에 같은 함수 이름이 있으면 Vue 인스턴스 우선 순위가 높아집니다.다음 예제에서 Vue 인스턴스는 객체를 혼입하는 methods 옵션과 동일한 함수를 포함합니다.

var mixin = {
  methods: {
    hellworld: function () {
      document.write('HelloWorld  ' + '<br>');
    },
    samemethod: function () {
      document.write('Mixin： ' + '<br>');
    }
  }
};
var vm = new Vue({
  mixins: [mixin],
  methods: {
    start: function () {
      document.write('start  ' + '<br>');
    },
    samemethod: function () {
      document.write('Main： ' + '<br>');
    }
  }
});
vm.hellworld();
vm.start();
vm.samemethod();
출력 결과:
HelloWorld 방법
start 방법
Main: 같은 메서드 이름
위의 예에서 우리는 다음과 같은 세 가지 방법을 사용했다.
vm.hellworld();
vm.start();
vm.samemethod();
출력 결과 methods 옵션에서 같은 함수 이름을 만나면 Vue 인스턴스가 더 높은 우선 순위로 출력됩니다.
전역 혼입
혼입 객체를 전역으로 등록할 수도 있습니다.사용 주의!객체를 글로벌 블렌드하면 이후에 생성된 모든 Vue 인스턴스에 영향을 줍니다.적절하게 사용하면 사용자 정의 대상에 처리 논리를 주입할 수 있다.

//   'myOption'  。
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})
 
new Vue({
 myOption: 'hello!'
})
// => "hello!"
개별 작성된 각 Vue 인스턴스(타사 템플릿 포함)에 영향을 줄 수 있으므로 객체의 전체 블렌드를 신중하게 사용합니다.
지금까지 Vue를 깊이 있게 이해했습니다.js 혼입의 상세한 내용, 더 많은 Vue.js가 혼입된 자료는 우리 다른 관련 문장에 주목하세요!
[Unity 학습노트] Cinemachine을 사용하여 적을 잠그는 기능을 가진 3인칭 카메라 방안을 신속하게 실현합니다.
[프로그래머스] 큰 수 만들기 (JAVA)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage