Kaedah pelaksanaan fungsi pemindahan nilai komponen bersebelahan dalam dokumen Vue

Vue, sebagai rangka kerja bahagian hadapan yang popular, selalunya perlu melaksanakan fungsi pemindahan nilai antara komponen. Antaranya, apabila nilai komponen bersebelahan dipindahkan, ia terutamanya direalisasikan dengan memanggil kaedah komponen. Artikel ini akan memperkenalkan kaedah pelaksanaan fungsi pemindahan nilai komponen bersebelahan dalam Vue.

1. Komponen induk menghantar nilai kepada komponen anak

Dalam Vue, arahan v-bind digunakan untuk mengikat nilai komponen induk kepada komponen anak. Kod pelaksanaan khusus adalah seperti berikut:

Dalam komponen induk:

<template>
  <div>
    <child-component v-bind:data="parentData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';
export default {
  components: {
    childComponent
  },
  data: {
    parentData: 'Hello, Vue!'
  }
}
</script>

Dalam komponen anak:

<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

Kod di atas mengikat data komponen induk parentData melalui v-bind:data Tetapkannya kepada atribut data komponen anak.

2. Komponen anak menghantar nilai kepada komponen induk

Dalam Vue, komponen anak perlu menghantar acara kepada komponen induk melalui kaedah $emit. Daftar acara dalam komponen induk dan proses data yang dihantar oleh komponen anak dalam fungsi panggil balik. Kod pelaksanaan khusus adalah seperti berikut:

Dalam komponen induk:

<template>
  <div>
    <child-component v-on:send-data="handleChildData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';
export default {
  components: {
    childComponent
  },
  methods: {
    handleChildData(data) {
      console.log(data);
    }
  }
}
</script>

Dalam komponen anak:

<template>
  <div>
    <button v-on:click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('send-data', 'Hello, Parent!');
    }
  }
}
</script>

Dalam kod di atas, komponen anak terikat kepada v-on:click melalui sendDataToParent Kaedah, dalam kaedah, hantar acara $emit kepada komponen induk melalui kaedah send-data dan hantar data Hello, Parent!. Dalam komponen induk, daftarkan fungsi panggil balik v-on:send-data acara send-data melalui handleChildData dan proses parameter yang dikembalikan oleh komponen anak dalam fungsi tersebut.

3. Memindahkan nilai antara komponen adik beradik

Apabila memindahkan data antara komponen adik beradik, komponen induk perlu digunakan sebagai jambatan perantaraan. Kod pelaksanaan khusus adalah seperti berikut:

Dalam komponen induk:

<template>
  <div>
    <brother-component1 v-on:update-data="handleBrotherData"></brother-component1>
    <br>
    <brother-component2 v-bind:data="parentData"></brother-component2>
  </div>
</template>

<script>
import brotherComponent1 from './brotherComponent1.vue';
import brotherComponent2 from './brotherComponent2.vue';
export default {
  components: {
    brotherComponent1,
    brotherComponent2
  },
  data: {
    parentData: ''
  },
  methods: {
    handleBrotherData(data) {
      this.parentData = data;
    }
  }
}
</script>

Dalam komponen anak 1:

<template>
  <div>
    <button v-on:click="sendDataToBrother">向兄弟组件2传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToBrother() {
      this.$emit('update-data', 'Hello, Brother 2!');
    }
  }
}
</script>

Dalam komponen anak 2:

<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

Di atas Dalam kod, komponen anak 1 menghantar acara update-data kepada komponen induk dan menghantar data Hello, Brother 2!; komponen induk mendengar acara v-on:update-data dan memproses data dalam fungsi handleBrotherData dan lulus yang diproses data melalui v-bind:data Ikat pada atribut data komponen anak 2.

Ringkasnya, kaedah pelaksanaan fungsi lulus nilai komponen bersebelahan dalam Vue terutamanya diselesaikan melalui pengikatan nilai dan komunikasi peristiwa antara komponen induk dan anak. Komponen induk berfungsi sebagai jambatan perantaraan antara komponen adik-beradik. Kaedah ini mudah, mudah difahami, fleksibel dan mudah, dan merupakan kaedah komunikasi komponen yang sangat penting dalam Vue.

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