vue에서 mixin과 컴포넌트의 차이점은 무엇입니까?

믹스인과 구성요소의 차이점: 구성요소를 참조한 후 본질적으로 상위 구성요소의 props 값을 기반으로 해당 작업을 수행하기 위해 상위 구성요소에 별도의 공간을 여는 것과 같습니다. , 둘은 여전히 ​​구별되고 상대적으로 독립적입니다. 구성 요소가 도입된 후 믹스인은 확장된 상위 구성 요소의 다양한 속성 메서드와 데이터 및 기타 메서드, 메서드 및 기타 구성 요소의 내부 콘텐츠와 동일합니다. 속성은 상위 구성 요소의 해당 콘텐츠와 병합됩니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

믹스인이란?

Mixins는 Vue 구성 요소에 재사용 가능한 기능을 배포하는 매우 유연한 방법입니다.

혼합 개체에는 임의의 구성 요소 옵션이 포함될 수 있습니다.

구성 요소가 mixin 개체를 사용하면 mixin 개체의 모든 옵션이 구성 요소 자체의 옵션에 혼합됩니다. [관련 추천 : vuejs 영상 튜토리얼, 웹 프론트엔드 개발]

믹스인과 컴포넌트의 차이점

컴포넌트를 참조한 후 상위에서 별도의 공간을 여는 것과 같습니다. 컴포넌트를 사용하려면 상위 컴포넌트에 따라 props를 통해 전달된 값이 그에 따라 동작하게 됩니다. 본질적으로 둘은 여전히 ​​별개이고 상대적으로 독립적입니다.

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

간단한 구성 요소 참조:

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

mixins:

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

여러 구성 요소나 여러 Vue 개체 인스턴스에 바인딩할 수 있는 vue의 공개 메서드를 등록하는 것과 약간 비슷합니다. 또 다른 점은 프로토타입 객체에 메서드를 등록하는 것과 유사합니다. 즉, 구성 요소 또는 Vue 인스턴스 객체에서 동일한 함수 이름을 가진 메서드를 정의하여 이를 재정의할 수 있습니다. 이는 하위 클래스 및 상위 클래스와 약간 비슷합니다.

mixin과 vuex의 차이점Mixins: 공유 변수를 정의하고 이를 각 구성 요소에 사용할 수 있으며 각 변수는 서로 독립적이며 값을 수정하면 됩니다. 구성 요소에서 서로 영향을 주지 않습니다. 객체가 동일하면 구성 요소는 상태 관리에 사용되는 mixins

vuex를 덮어씁니다. 여기에 정의된 변수는 각 구성 요소에서 이 변수의 값을 수정한 후 다른 구성 요소에서 사용 및 수정할 수 있습니다. 구성 요소 값도 이에 따라 수정됩니다.

mixins 사용
1. 먼저 elTableAdsorbent.js

export const elTableAdsorbent = {
  data() {
    return {
      count:10
    }
  },
  methods: {
    // 显示页面中所有内容
    handleCount() {
      this.count++
  }
}

또는

// 定义一个混入对象
    var myMixin = {
        data(){
            return{
                parent: 405
            }
        },
        mounted: function () {
            this.hello()
        },
        methods: {
            hello: function () {
                console.log(this.parent, 'hello from mixin!')
            }
        }
    }

와 같은 js 파일을 만든 다음 이 요구 사항이 필요한 vue 페이지에 도입하고

<el-button type="primary" @click="handleCount">{{count}}</el-button>
 
import { elTableAdsorbent } from '@/utils/mixin/elTableAdsorbent'
 
export default {
  mixins: [elTableAdsorbent],
  data() {
    return {}
  },
  created(){},
  methods:{}, 
  watch:{}
}

를 사용하세요. 3. 같은 이름 후크 함수가 하나의 배열로 결합되므로 둘 다 호출됩니다. 또한 mixin 개체의 후크는 구성 요소 자체 후크보다 먼저 호출됩니다.

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

4. 두 개체의 키 이름이 충돌하면 구성 요소 개체의 키-값 쌍이 사용됩니다.

var mixin = {
  methods: {
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    conflicting: function () {
      console.log('from self')
    }
  }
})
vm.conflicting() // => "from self"

mixins 적용

var install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (options) {
    // 逻辑...
  }
}

(학습 영상 공유: vuejs 입문 튜토리얼

, 기본 프로그래밍 영상)

위 내용은 vue에서 mixin과 컴포넌트의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!