Menyediakan dan menyuntik fungsi dalam Vue3: pemindahan data yang cekap antara komponen

Fungsi menyediakan dan menyuntik dalam Vue3 telah menjadi penyelesaian pilihan untuk pemindahan data yang cekap antara komponen. Mereka menggunakan mekanisme baharu untuk membenarkan komponen kanak-kanak memperoleh data dalam komponen nenek moyang dan mengemas kini data dalam komponen nenek moyang dalam komponen induk Ini memberikan kemungkinan tanpa had untuk membina aplikasi yang kompleks dan fleksibel. Artikel ini akan membincangkan fungsi menyediakan dan menyuntik dalam Vue3 secara mendalam untuk membantu pembaca memahami dengan lebih baik prinsip kerja dan penggunaan mereka.

1. Apakah fungsi menyediakan dan menyuntik?

Fungsi menyediakan dan menyuntik ialah ciri baharu dalam Vue3 Ia menyediakan kaedah pemindahan data yang berbeza daripada prop dan $emit. Fungsi provide digunakan untuk menyediakan data, dan fungsi inject digunakan untuk menyuntik data. Fungsi menyediakan menerima objek sebagai parameter, yang mengandungi data yang perlu diberikan kepada komponen anak. Fungsi inject menerima tatasusunan atau objek sebagai parameter Tatasusunan atau objek ini mengandungi data yang perlu disuntik daripada komponen ancestor. Perlu diingatkan bahawa fungsi menyediakan dan menyuntik hanya boleh menghantar data antara komponen nenek moyang yang sama dan komponen keturunan, dan tidak boleh merentas komponen.

2. Cara fungsi menyediakan dan menyuntik berfungsi

Dalam Vue3, fungsi menyediakan dan menyuntik menggunakan mekanisme baharu untuk mencapai pemindahan data. Mekanisme ini adalah berdasarkan fungsi pemaparan tersuai Vue, yang membenarkan penggunaan API konteks baharu untuk menyediakan dan menyuntik data.

Dalam fungsi provide, kami boleh menyediakan data dengan menetapkan atribut provide, contohnya:

const app = createApp({
  provide: {
    data: 'this is data'
  }
})

Dalam contoh ini, kami menyediakan data dalam komponen akar dengan data nama, yang The nilai ialah 'ini adalah data'. Seterusnya, kita boleh menggunakan fungsi inject dalam subkomponen untuk menyuntik data ini:

const childComponent = {
  inject: ['data'],
  mounted() {
    console.log(this.data)//输出'this is data'
  }
}

Dalam subkomponen, kita menyuntik data melalui atribut inject ini perlu mengandungi nama data yang perlu disuntik , seperti di sini Kami menyuntik data bernama data. Dalam komponen kanak-kanak, kita boleh mengakses data yang disuntik sama seperti prop.

Perlu diingat bahawa jika fungsi inject digunakan dalam komponen kanak-kanak, tetapi fungsi provide tidak menyediakan data yang perlu disuntik, maka data yang disuntik akan menjadi tidak ditentukan.

3. Cara menggunakan fungsi menyediakan dan menyuntik

Apabila menggunakan fungsi menyediakan dan menyuntik, kita perlu memberi perhatian kepada perkara berikut:

(1) menyediakan Fungsi suntikan hanya boleh menghantar data antara komponen nenek moyang yang sama dan komponen keturunan, dan tidak boleh menghantarnya merentasi komponen.

(2) Data yang disediakan dalam fungsi provide boleh dari sebarang jenis, termasuk fungsi, objek, dsb.

(3) Data yang disuntik menggunakan fungsi inject adalah baca sahaja secara lalai, iaitu data dalam komponen ancestor tidak boleh ditukar dalam komponen anak. Jika anda ingin menukar data dalam komponen ancestor, anda perlu menyediakan kaedah dalam komponen ancestor dan memanggil kaedah dalam komponen anak untuk mengemas kini data.

(4) Apabila melaksanakan fungsi menyediakan dan menyuntik, kami boleh menggunakan jenis Simbol untuk menyediakan atau menyuntik data, yang boleh mengelakkan pengubahsuaian data secara tidak sengaja.

(5) Apabila menggunakan menyediakan untuk menyediakan data, kita boleh menggunakan fungsi ref atau reaktif dalam fungsi persediaan untuk mencipta data responsif, supaya data boleh digunakan terus dalam sub-komponen dan boleh bertindak balas secara automatik kepada perubahan data.

Berikut ialah kes penggunaan lengkap, yang melaksanakan TodoList mudah dan menggunakan fungsi menyediakan dan menyuntik untuk memindahkan data:

const todoListProvide = {
  todos: ref([
    { id: 1, text: 'todo 1', done: false },
    { id: 2, text: 'todo 2', done: true },
    { id: 3, text: 'todo 3', done: false }
  ]),
  addTodo (text) {
    this.todos.push({
      id: this.todos.length + 1,
      text: text,
      done: false
    })
  }
}

const todoItemInject = ['todos']

const TodoItem = {
  inject: todoItemInject,
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: {
    toggleTodo () {
      this.todo.done = !this.todo.done
    }
  },
  template: `
    <li>
      {{ todo.text }}
      <button @click="toggleTodo">{{ todo.done ? 'Undo' : 'Done' }}</button>
    </li>
  `
}

const TodoList = {
  provide: todoListProvide,
  components: {
    TodoItem
  },
  setup() {
    const newTodo = ref('')
    const addTodo = () => {
      if (newTodo.value.trim() !== '') {
        todoListProvide.addTodo.call(todoListProvide, newTodo.value)
        newTodo.value = ''
      }
    }
    return {
      newTodo,
      addTodo
    }
  },
  template: `
    <div>
      <ul>
        <todo-item v-for="todo in todos" :key="todo.id" :todo="todo"/>
      </ul>
      <div>
        <input type="text" v-model="newTodo">
        <button @click="addTodo">Add Todo</button>
      </div>
    </div>
  `
}

createApp({
  components: {
    TodoList
  },
  template: `
    <todo-list></todo-list>
  `
}).mount('#app')

Dalam kes ini, kami mentakrifkan komponen TodoList, dalam komponen ini , fungsi menyediakan digunakan untuk menyediakan dua data kaedah todos dan addTodo. Antaranya, todos ialah tatasusunan responsif yang digunakan untuk menyimpan semua maklumat todo, dan kaedah addTodo digunakan untuk menambah todo baharu. Dalam TodoItem subkomponen, kami menggunakan fungsi inject untuk menyuntik data todos dan menggunakan atribut props untuk menerima data todo yang diluluskan. Dalam komponen ini, kami mentakrifkan kaedah toggleTodo untuk mengemas kini keadaan selesai dalam todo, dan kemudian menggunakan teks todo, atribut selesai dan kaedah toggleTodo dalam templat. Akhir sekali, kami mencipta komponen akar dan memasukkan TodoList ke dalam komponen akar untuk rendering.

Melalui demonstrasi kes ini, kita dapat melihat cara menggunakan fungsi menyediakan dan menyuntik untuk mencapai pemindahan data yang cekap antara komponen. Sama ada kami membangunkan komponen kecil yang mudah atau membina aplikasi yang kompleks dan fleksibel, menggunakan fungsi menyediakan dan menyuntik membolehkan kami menyusun komponen dengan lebih baik dan meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Menyediakan dan menyuntik fungsi dalam Vue3: pemindahan data yang cekap antara komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!