Apakah cara untuk menghantar nilai dalam komponen vue?

Kaedah pemindahan nilai komponen Vue: 1. Gunakan prop untuk menghantar data Komponen induk menghantar data kepada komponen anak melalui atribut HTML, dan komponen anak menerima data yang diluluskan melalui prop 2. Gunakan $emit untuk mencetuskan acara untuk menghantar data , sub-komponen menggunakan $emit untuk mencetuskan peristiwa tersuai, dan komponen induk menggunakan v-on untuk mendengar peristiwa tersuai sub-komponen 3. Gunakan provide/inject untuk menghantar nilai merentas peringkat; komponen induk menyediakan data melalui penyediaan, dan sub-komponen menggunakan suntikan untuk Menerima data.

Persekitaran pengendalian tutorial ini: sistem Windows 10, komputer Dell g3.

Pemindahan nilai antara komponen Vue boleh dicapai dalam tiga cara: props, $emit dan provide/inject.

Gunakan prop untuk menghantar data:

Salurkan data kepada komponen anak melalui atribut HTML dalam komponen induk. Komponen kanak-kanak menerima data yang dihantar oleh komponen induk melalui prop.

Komponen induk:

<template>
  <div>
    <ChildComponent :message="message"/>
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>

Komponen anak:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

Gunakan $emit untuk mencetuskan peristiwa untuk menghantar data:

Gunakan $emit dalam komponen anak untuk mencetuskan peristiwa tersuai dan lulus data yang perlu dihantar sebagai parameter. Komponen induk menggunakan v-on untuk mendengar acara tersuai komponen anak dan mendapatkan data yang diluluskan.

Komponen induk:

<template>
  <div>
    <ChildComponent v-on:custom-event="updateData"/>
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;&#39;
    }
  },
  methods: {
    updateData(data) {
      this.message = data;
    }
  }
}
</script>

Komponen anak:

<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateMessage() {
      this.$emit(&#39;custom-event&#39;, &#39;New Message&#39;);
    }
  }
}
</script>

Gunakan provide/inject untuk pemindahan nilai peringkat silang:

Sediakan data melalui provide dalam komponen induk, dan kemudian gunakan inject untuk menerima data dalam komponen anak .

Komponen induk:

<template>
  <div>
    <ChildComponent />
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>

Komponen kanak-kanak:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  inject: [&#39;message&#39;]
}
</script>

Di atas ialah tiga cara komponen Vue menghantar nilai. Mengikut senario dan keperluan tertentu, anda boleh memilih kaedah yang sesuai untuk memindahkan data antara komponen.

Atas ialah kandungan terperinci Apakah cara untuk menghantar nilai dalam komponen vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!