> 웹 프론트엔드 > View.js > vue.mixin을 사용하는 방법

vue.mixin을 사용하는 방법

coldplay.xixi
풀어 주다: 2020-11-16 11:38:36
원래의
2991명이 탐색했습니다.

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

vue.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을 사용하세요

관련 무료입니다. 학습 권장사항:
JavaScript🎜(동영상)🎜🎜

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿