Vue 믹스인 및 확장 사용 방법

이번에는 vue mixin과 extends 사용법을 알려드리겠습니다. vue mixins와 Extensions 사용시 Notes는 무엇인지 살펴보겠습니다.

vue는 믹스인을 제공하고 구성 항목을 확장하는데, 이는 최근 사용에서 매우 유용하다고 생각합니다.

믹스인과 상속확장

공식 문서에 따르면 실제로 둘 다 상속으로 이해될 수 있습니다. 믹스인은 객체 배열을 수신하고(다중 상속으로 이해 가능) 확장은 객체 또는 함수를 수신합니다(단일 상속으로 이해 가능).

후크 기능 상속

const extend = {
 created () {
  console.log('extends created')
 }
}
const mixin1 = {
 created () {
  console.log('mixin1 created')
 }
}
const mixin2 = {
 created () {
  console.log('mixin2 created')
 }
}
export default {
 extends: extend,
 mixins: [mixin1, mixin2],
 name: 'app',
 created () {
  console.log('created')
 }
}

콘솔 출력

extends created
mixin1 created
mixin2 created
created

• 결론: 믹스인과 확장에서 상속된 상위 클래스가 먼저 호출됩니다. 확장에 의해 트리거되는 priority는 대기열

• push(extend, mixin1, minxin2, 자체 후크 기능)

• 에 비해 더 높습니다. , watch 값 상속 규칙은 동일합니다.

메소드 상속

const extend = {
 data () {
  return {
   name: 'extend name'
  }
 }
}
const mixin1 = {
 data () {
  return {
   name: 'mixin1 name'
  }
 }
}
const mixin2 = {
 data () {
  return {
   name: 'mixin2 name'
  }
 }
}
// name = 'name'
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app',
 data () {
  return {
   name: 'name'
  }
 }
}
// 只写出子类，name = 'mixin2 name'，extends优先级高会被mixins覆盖
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app'
}
// 只写出子类，name = 'mixin1 name'，mixins后面继承会覆盖前面的
export default {
 mixins: [mixin2, mixin1],
 extends: extend,
 name: 'app'
}

• 결론: 하위 클래스가 다시 선언되면 데이터의 변수는 하위 클래스에 관계없이 다시 작성됩니다.

• 하위 클래스가 선언되지 않은 경우 데이터의 변수는 마지막으로 상속된 상위 클래스를 기반으로 합니다.

• 테스트 후 props의 attributes, 메서드의 메서드 및 계산된 값은 동일한 상속 규칙을 갖습니다.

믹스인, 확장, 확장을 별도로 소개하겠습니다

믹스인

호출 방법: mixins: [mixin1, mixin2]

메소드, 구성요소, 지시문 등을 포함한 상위 구성요소의 확장입니다. . .

Hook 함수가 실행되면 믹스인의 함수가 먼저 호출된 후 상위 컴포넌트의 함수가 호출됩니다.

믹스인을 생성할 때 데이터와 템플릿 속성을 추가할 수도 있지만, 상위 컴포넌트에도 이 속성이 있으면 상위가 우선시되는 시점에서 제작자의 의도(확장)도 알 수 있습니다.

데이터 내의 함수, 메서드, 구성 요소 및 지시문과 같은 키-값 형식의 개체는 모두 상위 구성 요소/인스턴스를 기반으로 합니다

연장

호출 방법: 확장: CompA

또한 믹스인과 유사하게 상위 구성요소의 확장이지만 상위 구성요소보다 우선순위가 낮습니다

연장

확장 구성요소 생성자

vue.comComponent('a', {...})

를 호출하면 자동으로 호출됩니다. 확장의 데이터가 함수라는 점은 주목할 가치가 있습니다.

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

추천 자료:

axios 클라이언트의 Ajax 요청 방법

vue.js vue-router는 사용자 경험을 향상시킵니다

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