Bagaimana untuk menyediakan komunikasi ibu bapa-anak dalam vuejs

Cara menyediakan komunikasi ibu bapa-anak dalam vuejs: 1. Komponen induk menggunakan prop untuk menghantar data kepada komponen anak 2. Komponen anak menghantar mesej kepada komponen induk melalui "$emit"; . Gunakan ".sync" gula sintaksis; 4. Gunakan "$attrs" dan "$pendengar";

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Terdapat beberapa cara untuk berkomunikasi antara komponen ibu bapa dan anak Vue:

• props

• $emit -- biasanya digunakan untuk enkapsulasi komponen

• .sync -- sintaksis gula

• $attrs dan $listeners -- digunakan untuk enkapsulasi komponen Terdapat banyak

• private dan inject -- komponen pesanan tinggi

Yang berikut akan memperkenalkan masing-masing

1. props

Ini biasanya digunakan dalam pembangunan harian, secara ringkasnya, kita boleh menghantar data kepada sub-komponen melalui prop, sama seperti paip air, data komponen induk mengalir dari. atas ke bawah ke sub-komponen , tidak boleh mengalir melawan aliran. Ini juga merupakan aliran data tunggal pengenalan reka bentuk Vue.

<div id="app">
  <child :content="message"></child>
</div>
// Js
let Child = Vue.extend({
  template: &#39;<h2>{{ content }}</h2>&#39;,
  props: {
    content: {
      type: String,
      default: () => { return &#39;from child&#39; }
    }
  }
})
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;from parent&#39;
  },
  components: {
    Child
  }
})

2. $emit

Pengenalan rasmi adalah untuk mencetuskan peristiwa pada tika semasa dan parameter tambahan akan dihantar kepada panggilan balik pendengar.

<div id="app">
  <my-button @greet="sayHi"></my-button>
</div>
let MyButton = Vue.extend({
  template: &#39;<button @click="triggerClick">click</button>&#39;,
  data () {
    return {
      greeting: &#39;vue.js!&#39;
    }
  },
  methods: {
    triggerClick () {
      this.$emit(&#39;greet&#39;, this.greeting)
    }
  }
})
new Vue({
  el: &#39;#app&#39;,
  components: {
    MyButton
  },
  methods: {
    sayHi (val) {
      alert(&#39;Hi, &#39; + val) // &#39;Hi, vue.js!&#39;
    }
  }
})

3. .sync modifier

pernah wujud sebagai fungsi mengikat dua hala dalam vue1.x, iaitu komponen anak boleh mengubah suai komponen induk nilai. Kerana ia melanggar konsep reka bentuk aliran data sehala, ia telah dialih keluar dalam vue2.x, tetapi pengubah suai .sync ini telah diperkenalkan semula dalam vue 2.3.0 dan ke atas. Tetapi ia hanya wujud sebagai gula sintaksis masa kompilasi. Ia dilanjutkan sebagai pendengar v-on yang mengemas kini sifat komponen induk secara automatik.

Dalam sesetengah kes, kita mungkin perlu melakukan "pengikatan dua hala" pada prop. Malangnya, pengikatan dua hala yang benar menimbulkan masalah penyelenggaraan kerana komponen anak boleh mengubah suai komponen induknya tanpa sumber perubahan yang jelas dalam komponen induk atau anak.

Gula sintaks ditulis dalam bentuk berikut

3aad4a5f8d6d21b85f13f5b7d90449ce
d093019edc1fd049b9381d54424ed8e7

Jadi kita boleh menggunakan gula sintaks .sync untuk menyingkatkannya dalam bentuk berikut

<text-document v-bind:title.sync="doc.title"></text-document>

Jadi bagaimana untuk mencapai pengikatan dua hala , contohnya, menukar nilai dalam kotak teks komponen anak sambil menukar nilai dalam komponen induk, kodnya adalah seperti berikut

<div id="app">
  <login :name.sync="userName"></login> {{ userName }}
</div>

let Login = Vue.extend({
  template: `
    <div class="input-group">
      <label>姓名:</label>
      <input v-model="text">
    </div>
  `,
  props: [&#39;name&#39;],
  data () {
    return {
      text: &#39;&#39;
    }
  },
  watch: {
    text (newVal) {
      this.$emit(&#39;update:name&#39;, newVal)
    }
  }
})

new Vue({
  el: &#39;#app&#39;,
  data: {
    userName: &#39;&#39;
  },
  components: {
    Login
  }
})

Hanya ada satu ayat dalam kod:

this.$emit('update:name', newVal)

Sintaks rasmi ialah: kemas kini: myPropName di mana myPropName mewakili nilai prop yang akan dikemas kini. Sudah tentu, jika anda tidak menggunakan .sync syntax sugar dan menggunakan .$emit di atas, anda boleh mencapai kesan yang sama

4 $attrs dan $listeners

Laman web rasmi untuk $attrs Penjelasan adalah seperti berikut:

Mengandungi pengikatan harta (kecuali kelas dan gaya) yang tidak diiktiraf (dan diperoleh) sebagai prop dalam skop induk. Apabila komponen tidak mengisytiharkan sebarang prop, semua pengikatan skop induk (kecuali kelas dan gaya) akan disertakan di sini dan komponen dalaman boleh dihantar melalui v-bind="$attrs" - apabila mencipta komponen peringkat tinggi Sangat berguna.

Tapak web rasmi menerangkan $listeners seperti berikut:

Mengandungi pendengar acara v-on dalam skop induk (tanpa pengubah .native). Ia boleh dihantar ke dalam komponen dalaman melalui v-on="$listeners" - sangat berguna apabila mencipta komponen peringkat lebih tinggi.

Atribut $attrs dan $listeners adalah seperti dua kotak penyimpanan, satu bertanggungjawab untuk menyimpan atribut dan satu lagi bertanggungjawab untuk menyimpan acara kedua-duanya menyimpan data dalam bentuk objek

<div id="app">
  <child
    :foo="foo"
    :bar="bar"
    @one.native="triggerOne"
    @two="triggerTwo">
  </child>
</div>

let Child = Vue.extend({
  template: &#39;<h2>{{ foo }}</h2>&#39;,
  props: [&#39;foo&#39;],
  created () {
    console.log(this.$attrs, this.$listeners)
    // -> {bar: "parent bar"}
    // -> {two: fn}
    // 这里我们访问父组件中的 `triggerTwo` 方法
    this.$listeners.two()
    // -> &#39;two&#39;
  }
})

new Vue({
  el: &#39;#app&#39;,
  data: {
    foo: &#39;parent foo&#39;,
    bar: &#39;parent bar&#39;
  },
  components: {
    Child
  },
  methods: {
    triggerOne () {
      alert(&#39;one&#39;)
    },
    triggerTwo () {
      alert(&#39;two&#39;)
    }
  }
})

Ya Lihat, kami boleh menghantar data melalui $attrs dan $listeners, dan sangat mudah untuk menghubungi dan memproses jika diperlukan. Sudah tentu, kita juga boleh menurunkannya peringkat demi peringkat melalui v-on="$listeners", dan keturunannya akan menjadi tidak berkesudahan!

5 persendirian dan suntikan

Mari kita lihat penerangan rasmi penyediaan / suntikan:

Menyediakan dan menyuntik terutamanya high-end pemalam/komponen Perpustakaan menyediakan kes penggunaan. Tidak disyorkan untuk digunakan secara langsung dalam kod aplikasi. Dan sepasang pilihan ini perlu digunakan bersama-sama untuk membolehkan komponen nenek moyang menyuntik pergantungan kepada semua keturunannya, tidak kira betapa dalam hierarki komponen itu, dan ia akan sentiasa berkuat kuasa dari masa perhubungan huluan dan hiliran diwujudkan.

ab509c080ec9f7ec77efedb1cdcd4bed

  1207412ca14c1d8bb1c5d564f723d29198f9e0de16d4632c0e387ffd4bb1294d

16b28748ea4df4d9c2150843fecfba68

let Son = Vue.extend({
  template: 'c1a436a314ed609750bd7c7d319db4dason2e9b454fa8428549ca2e64dfac4625cd',
  inject: {
    house: {
      default: '没房'
    },
    car: {
      default: '没车'
    },
    money: {
      // 长大工作了虽然有点钱
      // 仅供生活费，需要向父母要
      default: '￥4500'
    }
  },
  created () {
    console.log(this.house, this.car, this.money)
    // -> '房子', '车子', '￥10000'
  }
})

new Vue({
  el: '#app',
  provide: {
    house: '房子',
    car: '车子',
    money: '￥10000'
  },
  components: {
    Son
  }
})

Untuk lebih banyak contoh, sila rujuk pada kod sumber elemen-ui, sebilangan besar daripadanya menggunakan kaedah ini

Cadangan berkaitan: "Tutorial vue.js"

Atas ialah kandungan terperinci Bagaimana untuk menyediakan komunikasi ibu bapa-anak dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!