vue.mixin을 사용하는 방법

vue.mixin 사용 방법: 1. 여러 구성 요소가 데이터와 메서드를 공유할 수 있습니다. mixin을 사용하여 구성 요소에 도입한 후 mixin의 메서드와 속성도 구성 요소에 통합되어 직접 사용할 수 있습니다. 후크 함수가 호출되며 믹스인의 후크가 먼저 실행됩니다.

【관련 추천 기사: vue.js】

vue.mixin 사용 방법:

vue는 구성 요소를 보다 효율적으로 구현하기 위해 혼합 메커니즘인 믹스인을 제공합니다. 콘텐츠 재사용. 처음에는 구성품과 별 차이가 없다고 생각했습니다. . 나중에 나는 그것이 틀렸다는 것을 알았다. 일반적인 상황에서 믹스인과 가져온 컴포넌트의 차이점을 살펴보겠습니다.

구성 요소가 참조된 후에는 상위 구성 요소의 props 값을 기반으로 해당 작업을 수행하기 위해 상위 구성 요소에 별도의 공간을 여는 것과 같습니다. 본질적으로 둘은 여전히 ​​구별되고 상대적으로 독립적입니다. .

그리고 믹스인은 컴포넌트를 도입한 후 데이터 및 기타 메소드, 메소드 및 기타 속성과 같은 컴포넌트의 내부 컨텐츠를 상위 컴포넌트의 해당 컨텐츠와 병합합니다. 도입 이후 상위 컴포넌트의 다양한 속성 메소드가 확장된 것과 동일합니다.

단순 구성 요소 참조:

상위 구성 요소 + 하위 구성 요소>>> 상위 구성 요소 + 하위 구성 요소父组件 + 子组件 >>> 父组件 + 子组件

     mixins：

          父组件 + 子组件 >>> new父组件

믹스인:

새 상위 구성 요소

기능: 여러 구성 요소 데이터와 메소드를 믹스인을 통해 컴포넌트에 도입한 후, 믹스인에 포함된 메소드와 속성도 컴포넌트에 통합되어 바로 사용할 수 있습니다. 두 후크 함수가 모두 호출되며 믹스인의 후크가 먼저 실행됩니다.

다음은 vue mixin의 사용법을 소개합니다.

1.js 파일 정의(mixin.js)

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

2. vue 파일에서 mixin을 사용하세요

import mixin from '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

관련 무료입니다. 학습 권장사항:

JavaScript🎜(동영상)🎜🎜

위 내용은 vue.mixin을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!