Mari belajar campuran Vue bersama-sama

Kata Pengantar

Jika anda mendapati bahawa logik beberapa komponen hampir serupa semasa menulis komponen vue, maka anda boleh menggunakan mixin vue untuk mengekstrak logik yang serupa dan merangkumkannya ke dalam js , dan kemudian diperkenalkan dan digunakan dalam setiap komponen.

mixin digunakan untuk menyelesaikan masalah penggunaan semula logik komponen vue. Hari ini kita akan mempelajari mixin Vue.

mixin

mixin adalah terutamanya untuk penggunaan semula logik js vue, jadi ia biasanya fail js.

Penggunaan

Mari kita lihat penggunaannya dahulu

// 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()
  }
}

Penggunaannya sama dengan komponen vue. Contohnya, fungsi cangkuk, kaedah, data, dsb.

kemudiannya digunakan dalam komponen dan boleh diperkenalkan melalui pilihan mixins.

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

Kemudian akan timbul soalan Jika fungsi cangkuk yang sama, kaedah dengan nama yang sama dan data dengan nama yang sama juga ditakrifkan dalam komponen, yang mana yang harus diutamakan? Tulis ganti atau cantumkan?

Mari kita lihat contoh

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()
  }
}

Keputusan yang dicetak adalah seperti berikut:

Melalui keputusan di atas, kami boleh dapatkan,

Fungsi cangkuk akan digabungkan dan dilaksanakan. Mula-mula laksanakan fungsi cangkuk mixin dan kemudian laksanakan fungsi cangkuk komponen.

Data dengan nama data yang sama harus dibincangkan berdasarkan kes demi kes

Jika ia adalah jenis asas, data mixin akan ditimpa dengan data. dengan nama komponen yang sama.

Tetapi jika ia adalah objek, ia akan secara rekursif membandingkan kunci Jika ia adalah kunci dengan nama yang sama, ia akan ditimpa Jika ia bukan nama yang sama, ia akan dikekalkan. Perkara yang sama berlaku untuk kaedah

, yang akan menimpa kaedah mixin dengan nama yang sama dengan kaedah komponen.

Selain pilihan di atas, terdapat juga components (komponen) dan directives (arahan), yang mempunyai logik yang sama akan ditimpa, dengan keutamaan diberikan kepada komponen .

Kelemahan mixin

Kelemahan proses yang saya gunakan mixin ialah nama pembolehubah sukar dicari dan tidak mudah untuk berfikir bahawa ia ditakrifkan dalam mixin.

Jadi ia akan muncul, adakah nama pembolehubah ini tidak ditentukan? Mengapa saya hanya boleh mencari tempat di mana ia digunakan, tetapi bukan tempat di mana ia ditakrifkan?

Saya akhirnya menyedarinya selepas saya menemui penggunaan mixin.

Pembelajaran yang disyorkan: "tutorial video vue"

Atas ialah kandungan terperinci Mari belajar campuran Vue bersama-sama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!