Vue의 믹스인을 함께 배워볼까요?

머리말

vue 컴포넌트를 작성할 때 여러 컴포넌트의 로직이 거의 유사하다는 것을 발견했다면 vue의 믹스인을 사용하여 유사한 로직을 추출하여 js로 캡슐화한 다음 각 컴포넌트 사용에 도입할 수 있습니다.

mixin은 Vue 구성 요소의 논리 재사용 문제를 해결하는 데 사용됩니다. 오늘은 Vue의 믹스인을 배워보겠습니다.

mixin

mixin은 주로 vue의 js 로직 재사용을 위한 것이므로 일반적으로 js 파일입니다.

Usage

먼저 사용법을 살펴보겠습니다

// name.js
export default {
  data () {
    return {
      name: 'mixin的name',
      obj: {name:'mixin', value:'mixin'}
    }
  },
  methods: {
    getName () {
      console.log('我是mixin,name:', this.name)
      console.log('obj:', this.obj)
    }
  },
  mounted () {
    console.log('我是mixin的mounted')
    this.getName()
  }
}

사용법은 vue 컴포넌트와 동일합니다. 예를 들어 후크 함수, 메서드, 데이터 등이 있습니다.

그런 다음 컴포넌트에서 사용하고 mixins 옵션을 통해 도입하세요. mixins选项即可引入。

import name from './name.js'
export default {
  mixins: [name],
  data () {
  }
}

那么就会有一个问题，那么如果组件内也定义了同样的钩子函数，同名方法，同名数据，该以谁的为准？是覆盖还是合并？

通过例子来看看

import name from './name.js'
export default {
  mixins: [name],
  data () {
    name: '组件的name',
    obj: {name:'component'}
  },
  methods: {
    getName () {
      console.log('我是组件,name:', this.name)
      console.log('obj:', this.obj)
    }
  },
  mounted () {
    console.log('我是组件的mounted')
    this.getName()
  }
}

打印的结果如下：

通过以上结果可以得到，

钩子函数会合并起来，都会执行。先执行mixins的钩子函数再执行组件的钩子函数。

data的同名数据，要分情况讨论

如果是基本类型，会用组件的同名数据覆盖mixin的数据。

但是如果是对象，会递归对比key，如果是同名key则会覆盖，如果不是同名的，则保留。

methods的方法也是一样，会用组件的方法覆盖mixin的同名方法。

除了上面这些选项，还有比如components（组件），和directivesrrreee 그러면 동일한 후크 함수, 동일한 이름의 메서드, 동일한 이름의 데이터가 구성 요소에 정의되어 있으면 누구 것이 우선해야 하는지에 대한 질문이 있을 것입니다. 덮어쓰시겠습니까, 아니면 병합하시겠습니까?

예제를 살펴보겠습니다

rrreee

인쇄된 결과는 다음과 같습니다.

위 결과에서 얻을 수 있습니다.

Hook 기능이 병합되어 실행됩니다.

믹스인의 Hook 기능을 먼저 실행한 후, 컴포넌트의 Hook 기능을 실행하세요.
data와 같은 이름의 데이터는 사례별로 논의해야 합니다.

🎜기본 유형인 경우 mixin의 데이터는 Component의 동일한 이름의 데이터로 덮어쓰게 됩니다. 🎜🎜하지만 객체라면 🎜재귀적으로🎜 키를 비교하게 됩니다. 이름이 같은 키라면 덮어쓰게 됩니다. 🎜🎜메서드에도 동일하게 적용됩니다. 이는 동일한 이름의 믹스인 메서드를 구성 요소의 메서드로 덮어쓰게 됩니다. 🎜🎜위 옵션 외에도 동일한 논리를 갖는 구성요소(구성요소) 및 지시문(명령어)도 있습니다. 덮어쓰여지며 🎜컴포넌트🎜의 항목이 우선적으로 적용됩니다. 🎜🎜mixin의 단점🎜🎜 제가 mixin을 사용하는 프로세스의 단점은 변수 이름을 찾기가 어렵고, mixin에 정의되어 있다고 생각하기가 쉽지 않다는 점이라고 생각합니다. 🎜🎜그럼 이렇게 나오네요. 이 변수명은 정의되지 않은건가요? 왜 사용된 곳만 찾을 수 있고 정의된 곳은 찾을 수 없나요? 🎜🎜믹스인의 쓰임새를 발견하고서야 깨달았습니다. 🎜🎜추천 학습: "🎜vue 비디오 튜토리얼🎜"🎜🎜

위 내용은 Vue의 믹스인을 함께 배워볼까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!