Apakah perbezaan antara mixin dan komponen dalam vue

Perbezaan antara mixin dan komponen: selepas komponen dirujuk, ia bersamaan dengan membuka ruang berasingan dalam komponen induk untuk melaksanakan operasi yang sepadan berdasarkan nilai ​​dari prop komponen induk. Pada dasarnya, kedua-duanya masih berbeza Secara relatifnya selepas komponen diperkenalkan, campuran adalah bersamaan dengan pelbagai kaedah atribut komponen induk yang telah dikembangkan, dan kandungan dalaman komponen seperti data dan kaedah lain, kaedah dan atribut lain akan digabungkan dengan kandungan komponen induk yang sepadan.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Apakah itu Mixin?

Mixin ialah cara yang sangat fleksibel untuk mengedarkan fungsi boleh guna semula dalam komponen Vue.

Objek bercampur boleh mengandungi pilihan komponen sewenang-wenangnya.

Apabila komponen menggunakan objek mixin, semua pilihan objek mixin akan dicampur ke dalam pilihan komponen itu sendiri. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Perbezaan antara mixin dan komponen

Selepas komponen dirujuk, ia bersamaan dengan membuka ruang berasingan dalam komponen induk untuk melaksanakan operasi yang sepadan berdasarkan nilai-nilai daripada prop komponen induk pada dasarnya, kedua-duanya adalah berbeza dan agak bebas.

Selepas komponen diperkenalkan, mixin menggabungkan kandungan dalaman komponen seperti data dan kaedah lain, kaedah dan atribut lain dengan kandungan komponen induk yang sepadan. Ia bersamaan dengan selepas pengenalan, pelbagai kaedah atribut komponen induk telah dikembangkan.

Rujukan komponen mudah:

• Komponen induk + komponen anak>>> Komponen induk + komponen anak

campuran :

• komponen induk + komponen anak>>> komponen induk baharu

adalah sedikit seperti mendaftarkan kaedah awam vue, Can terikat kepada berbilang komponen atau berbilang contoh objek Vue. Perkara lain adalah serupa dengan mendaftarkan kaedah dalam objek prototaip Dalam objek contoh, iaitu komponen atau objek contoh Vue, anda masih boleh mentakrifkan kaedah dengan nama fungsi yang sama untuk mengatasinya, yang agak serupa. subkelas dan kelas induk.

Perbezaan antara mixin dan vuex

Mixins: Anda boleh mentakrifkan pembolehubah dikongsi dan menggunakannya dalam setiap komponen , setiap pembolehubah adalah bebas antara satu sama lain, dan pengubahsuaian nilai tidak akan menjejaskan satu sama lain dalam komponen. Jika objek adalah sama, komponen akan menulis ganti mixin

vuex: digunakan untuk pengurusan keadaan Pembolehubah yang ditakrifkan di dalamnya boleh digunakan dan diubah suai dalam setiap komponen. lain Nilai pembolehubah ini dalam komponen juga akan diubah suai.

Penggunaan mixin

1 Mula-mula buat fail js, seperti elTableAdsorbent.js

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

<.> Atau

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

2. Kemudian perkenalkan dalam halaman vue yang memerlukan keperluan ini dan gunakan

<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. Fungsi cangkuk dengan nama yang sama akan digabungkan menjadi satu array, jadi mereka semua akan dipanggil. Selain itu, cangkuk objek mixin akan dipanggil sebelum cangkuk komponen itu sendiri.

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

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

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

4. Apabila nama kunci dua objek bercanggah, pasangan nilai kunci objek komponen diambil.

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"

Aplikasi campuran

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) {
    // 逻辑...
  }
}

(Belajar perkongsian video:

Tutorial pengenalan Vuejs , Video Pengaturcaraan Asas)

Atas ialah kandungan terperinci Apakah perbezaan antara mixin dan komponen dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!