Kaedah pelaksanaan fungsi pemindahan nilai ibu bapa-anak komponen dalam dokumen Vue

Vue ialah rangka kerja JavaScript yang popular Pembangunan komponennya boleh membantu kami meningkatkan tahap modulariti semasa membangunkan aplikasi yang kompleks, dan meningkatkan kebolehselenggaraan dan kebolehskalaan kod. Dalam Vue, pemindahan data antara komponen adalah keperluan yang sangat biasa, dan senario yang paling biasa ialah pemindahan data antara komponen induk dan anak. Untuk melaksanakan pemindahan data seperti ini dalam Vue, kita perlu memahami kaedah pelaksanaan pemindahan nilai antara komponen induk dan anak.

Dalam komponen Vue, komponen induk boleh mempunyai berbilang komponen anak pada masa yang sama Komponen induk boleh menghantar data kepada komponen anak Data ini boleh menjadi data komponen induk atau pengembalian fungsi daripada komponen induk yang memanggil nilai komponen anak. Khususnya, terdapat cara berikut untuk melaksanakan pemindahan nilai ibu bapa-anak komponen dalam Vue:

1. Data pemindahan props
   Dalam Vue, kami boleh mengisytiharkan atribut props dalam komponen anak, dan kemudian Data dihantar daripada komponen induk kepada komponen anak dalam bentuk atribut. Komponen anak boleh menerima data ini menggunakan sifat yang diisytiharkan dalam atribut props.

Kod sampel:

Komponen induk:

<template>
  <div>
    <child-component :msg="helloWorld"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    data() {
      return {
        helloWorld: 'Hello World!'
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

Komponen kanak-kanak:

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
  export default {
    props: {
      msg: String
    }
  }
</script>

Dalam contoh ini, kami mengisytiharkan dalam prop komponen anak A atribut, namanya ialah msg dan jenisnya ialah String. Apabila menggunakan komponen anak dalam komponen induk, kami menggunakan arahan v-bind untuk mengikat atribut helloWorld dalam komponen induk kepada atribut msg komponen anak.

2. Komponen anak menghantar data kepada komponen induk melalui acara $emit
   Dalam Vue, kita boleh menghantar data kepada komponen induk dengan mencetuskan peristiwa. Komponen anak boleh mencetuskan peristiwa tersuai dengan memanggil fungsi $emit dan data yang perlu dihantar boleh dihantar kepada komponen induk sebagai parameter peristiwa.

Kod sampel:

Komponen induk:

<template>
  <div>
    <child-component @message-sent="showMessage"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    methods: {
      showMessage(msg) {
        console.log(msg)
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

Komponen kanak-kanak:

<template>
  <div>
    <button @click="sendMessage">Click Me</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('message-sent', 'Hello World!')
      }
    }
  }
</script>

Dalam contoh ini, kami menambah pada komponen anak butang A . Apabila butang diklik, komponen kanak-kanak memanggil fungsi sendMessage, mencetuskan acara tersuai bernama mesej dihantar dan menghantar parameter 'Hello World!' kepada komponen induk.

3. Dapatkan contoh subkomponen melalui atribut ref
   Dalam Vue, kita boleh mendapatkan contoh subkomponen dengan menambahkan atribut ref padanya, dan kemudian panggil terus kaedah dan sifat pada tika ini .

Kod sampel:

Komponen induk:

<template>
  <div>
    <button @click="showMessage">Click Me</button>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    methods: {
      showMessage() {
        console.log(this.$refs.child.message)
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

Komponen kanak-kanak:

<template>
  <div>
    {{message}}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>

Dalam contoh ini, kami mentakrifkan dalam data komponen anak A mesej atribut, dan contoh komponen anak diperoleh melalui atribut ref dalam komponen induk. Apabila butang diklik, komponen induk memperoleh contoh komponen anak melalui ini.$refs.child, dan kemudian mengakses terus sifat mesej padanya.

Ringkasan:
Di atas ialah beberapa cara biasa untuk melaksanakan pemindahan nilai ibu bapa-anak komponen dalam Vue. Antaranya, Props ialah kaedah penghantaran data yang paling biasa digunakan, yang boleh menjadikan jenis pemindahan data antara komponen jelas dan jelas, dan mempunyai kebolehbacaan dan kebolehselenggaraan yang lebih baik dan kaedah penghantaran data kepada komponen induk melalui acara $emit ialah berkenaan Ia sesuai untuk senario di mana operasi atau data perlu dilakukan dalam sub-komponen tetapi tidak boleh dicapai melalui prop Kaedah mendapatkan contoh sub-komponen melalui atribut ref adalah sesuai untuk situasi di mana komponen induk perlu mengendalikan sub-komponen secara langsung. data atau fungsi komponen.

Atas ialah kandungan terperinci Kaedah pelaksanaan fungsi pemindahan nilai ibu bapa-anak komponen dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!