Vue에서 믹스인을 사용하는 방법

이번에는 Vue에서 mixin을 사용하는 방법과 Vue에서 mixin을 사용할 때 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

　 Vue는 구성 요소 콘텐츠를 보다 효율적으로 재사용하는 데 사용되는 혼합 메커니즘인 믹스인을 제공합니다. 처음에는 구성품과 별 차이가 없다고 생각했습니다. . 나중에 나는 그것이 틀렸다는 것을 알았다. 일반적인 상황에서 믹스인과 가져온 컴포넌트의 차이점을 살펴보겠습니다. +                 상위 구성 요소의 props 값을 기반으로 해당 작업을 수행하기 위해 상위 구성 요소에 별도의 공간을 여는 것과 같습니다. 본질적으로 둘은 여전히 ​​구별되고 상대적으로 독립적입니다.

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

상위 구성 요소 + 하위 구성 요소>>> 상위 구성 요소 + 하위 구성 요소 믹스인:

상위 구성 요소+하위 구성 요소>>> 새로운 상위 구성 요소

기능: 여러 구성 요소를 공유할 수 있습니다. 데이터 및 메소드 믹스인을 사용하여 컴포넌트에 도입된 후, 믹스인의 메소드 및 속성이 컴포넌트에 통합되어 직접 사용될 수 있습니다. 후크

는 둘 다 호출되며 믹스인의 후크가 먼저 실행됩니다.

다음은 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'; // 引入mixin文件
export default {
 mixins: [mixin]
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS를 사용하여 DOM 요소의 절대 위치를 얻는 방법

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