Vue 내에서 믹스인 사용하기

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

vue의 믹스인에 대한 나의 이해에 대해 이야기하겠습니다

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

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

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

간단한 구성 요소 참조:

상위 구성 요소 + 하위 구성 요소>>> 상위 구성 요소 + 하위 구성 요소

믹스인:

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

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

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

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

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

사용법에 대해서는 vue 문서에 자세한 소개가 있습니다. 여기서는 vue 파일의 믹스인 사용에서 사용하는 방법만 소개합니다.

2. vue 파일에서 mixin 사용

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

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

추천 자료:

vue 라우터 동적 라우팅 작업 하위 라우팅

Vue를 사용하여 라우팅 매개변수를 동적으로 설정

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