Kenali atribut $attrs dan $listeners dalam vue dan bincangkan tentang penggunaannya

Artikel ini akan membawa anda melalui alatan berkuasa untuk merangkum komponen dalam vue: atribut $attrs dan $listeners, dan saya harap ia akan membantu semua orang.

Apabila sarang komponen berbilang peringkat perlu menghantar data, kaedah yang biasa digunakan adalah melalui vuex. Tetapi hanya menghantar data tanpa pemprosesan perantaraan dan menggunakan vuex untuk pemprosesan adalah berlebihan. Jadi terdapat dua atribut $attrs dan $listeners, yang biasanya digunakan bersama dengan inheritAttrs. [Cadangan berkaitan: tutorial video vuejs]

$attrs

• Atribut yang dihantar daripada komponen induk kepada komponen anak tersuai , penerimaan akan Ia ditetapkan secara automatik kepada teg paling luar di dalam subkomponen Jika ia prop dan class, style dan class teg paling luar akan digabungkan. style
Jika komponen anak tidak mahu mewarisi atribut bukan
• yang dihantar oleh komponen induk, anda boleh menggunakan prop untuk melumpuhkan warisan, dan kemudian gunakan inheritAttrs untuk menetapkan bukan- Atribut v-bind="$attrs" dihantar dari luar ke teg yang diingini, tetapi ini tidak akan berubah prop dan class. style

inheritAttrs attribute

2.4.0 ditambahkan

pautan laman web rasmi https://cn .vuejs.org/v2/api/#inheritAttrs

• Jenis: boolean

• Nilai lalai

  :true

• Butiran

  : Secara lalai, skop induk tidak diiktiraf sebagai pengikatan Atribut prop akan "jatuh semula" dan digunakan pada elemen akar komponen anak sebagai atribut HTML biasa. Apabila menulis komponen yang membalut elemen sasaran atau komponen lain, ini mungkin tidak sentiasa mematuhi tingkah laku yang dijangkakan. Dengan menetapkan

  kepada

  , gelagat lalai ini akan dialih keluar. Atribut ini boleh dijadikan berkesan melalui sifat contoh inheritAttrs (juga baharu dalam 2.4), dan boleh terikat secara eksplisit kepada elemen bukan akar melalui false. $attrsv-bindNota: Pilihan ini

  tidak menjejaskan pengikatan

  dan . classstyle

Contoh: Komponen induk

Komponen kanak-kanak

<template>
  <my-input
      required
      placeholder="请输入内容"
      type="text"
      class="theme-dark"
  />
</template>

<script>
import MyInput from &#39;./child&#39;
export default {
  name: &#39;parent&#39;,
  components: {
    MyInput
  }
}
</script>

Komponen anak tidak menerima nilai yang dihantar daripada komponen induk, juga tidak terikat, tetapi dengan atribut

<template>
  <div>
    <input
        v-bind="$attrs"
        class="form-control"
    />
  </div>
</template>

<script>
export default {
  name: &#39;MyInput&#39;,
  inheritAttrs: false
}
</script>

, ia akan menerima dan mengikatnya secara automatik

v-bind="$attrs"inheritAttrs: false

inheritAttrs: true

$pendengar (penjelasan laman web rasmi)

pendengar
• : Mengandungi pendengar acara dalam skop induk (tanpa pengubah suai). Ia boleh disalurkan ke dalam komponen dalam melalui .native - sangat berguna apabila mencipta komponen tahap yang lebih tinggi. v-onv-on="$listeners"
Mari kita mulakan dengan kod: berikut hanya dua contoh acara asli,

dan

focueinput

// 父组件
<template>
  <my-input
      required
      placeholder
      class="theme-dark"
      @focue="onFocus"
      @input="onInput"
  >
  </my-input>
</template>
<script>
import MyInput from &#39;./child&#39;
export default {
  components: {
    MyInput
  },
  methods: {
    onFocus (e) {
      console.log(e.target.value)
    },
    onInput (e) {
      console.log(e.target.value)
    }
  }
}
</script>

Sangat menyusahkan untuk mengikat acara asli seperti ini semua acara perlu terikat, tetapi menggunakan

// 子组件
<template>
  <div>
    <input
        type="text"
        v-bind="$attrs"
        class="form-control"
        @focus="$emit(&#39;focus&#39;, $event)"
        @input="$emit(&#39;input&#39;, $event)"
    />
  </div>
</template>

<script>
export default {
  name: &#39;MyInput&#39;,
  inheritAttrs: false
}
</script>

akan menjimatkan banyak masalah

v-on="$listeners"

Dengan cara ini, satu baris kod boleh menyelesaikan masalah mengikat semua acara asli

 <input
        type="text"
        v-bind="$attrs"
        class="form-control"
+       v-on="$listeners"
-       @focus="$emit(&#39;focus&#39;, $event)"
-       @input="$emit(&#39;input&#39;, $event)"
    />

[Cadangan berkaitan: "

tutorial vuejs

》,《bahagian hadapan web》】

Atas ialah kandungan terperinci Kenali atribut $attrs dan $listeners dalam vue dan bincangkan tentang penggunaannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!