vue에서 믹스인 및 확장 사용법에 대한 자세한 소개

vue는 믹스인을 제공하고 구성 항목을 확장하는데, 이는 최근 사용에서 매우 유용하다고 생각합니다. 다음으로 이 글을 통해 Vue에서 믹스인과 확장의 영리한 사용법을 소개하겠습니다. 필요하신 분들은 참고하시면 됩니다.

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

• 결론: 믹스인과 확장에서 상속된 상위 클래스가 먼저 호출되고 확장은 큐에 비해 더 높은 우선순위로 트리거됩니다.

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

• 테스트 후 watch의 값 상속 규칙은 동일합니다.

Inherit method

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의 속성, 메서드의 메서드 및 계산된 값에 대한 상속 규칙은 동일합니다.

다음은 mixins,extends,extend에 대한 별도의 소개입니다

mixins

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

는 메서드, 구성 요소, 지시문 등 . .

후크 기능을 실행할 때 먼저 mixins 기능을 호출한 다음 상위 구성 요소 기능을 호출하세요.

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

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

extends

호출 메서드: 확장: CompA

도 다음의 확장입니다. 상위 구성 요소는 믹스인과 유사하지만 상위 구성 요소보다 우선 순위가 낮습니다

extend

확장 구성 요소의 생성자

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

extend의 ​​데이터가 함수라는 점은 주목할 만합니다.

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Angular에서 테이블 정렬을 구현하는 방법

Angular에서 확인을 구현하는 방법

JavaScript 사용에서 개체 값을 병합하는 방법에 대해

JavaScript 의사 배열 사용에 대해( 자세한 튜토리얼)

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