Cara menyelesaikan ralat Vue: Tidak dapat menggunakan menyediakan dan menyuntik dengan betul untuk suntikan pergantungan

Cara menyelesaikan ralat Vue: Tidak dapat menggunakan menyediakan dan menyuntik dengan betul untuk suntikan pergantungan

Vue.js ialah rangka kerja progresif berdasarkan JavaScript, yang menggunakan idea pengkomponenan untuk melaksanakan pembangunan bahagian hadapan. Dalam Vue.js, kami sering menggunakan menyediakan dan menyuntik untuk suntikan pergantungan antara komponen. Tetapi kadangkala, kami mungkin menghadapi ralat yang tidak dapat menggunakan menyediakan dan menyuntik dengan betul untuk suntikan pergantungan. Artikel ini akan menerangkan punca ralat ini dan cara membetulkannya.

Penerangan masalah

Apabila kita menggunakan provide dalam komponen induk untuk memberikan nilai, dan menggunakan inject dalam komponen anak untuk menerima nilai, kadangkala kita akan menghadapi ralat: Provide/inject should not be used with React render functions. Mesej ralat tertentu mungkin berbeza-beza, tetapi maksud umum ialah anda tidak seharusnya menggunakan menyediakan dan menyuntik untuk suntikan kebergantungan apabila menggunakan fungsi pemaparan React.

Punca masalah

Sebab ralat ini ialah Vue.js menyemak jenis fungsi pemaparan apabila menggunakan menyediakan dan menyuntik untuk suntikan pergantungan. Jika fungsi pemaparan adalah berdasarkan React, maka Vue.js akan menganggap bahawa penggunaan provide dan inject adalah salah, kerana terdapat cara lain untuk melakukan suntikan pergantungan dalam React.

Penyelesaian

Penyelesaian masalah ini mudah sahaja, kita hanya perlu menggunakan kaedah lain yang disediakan oleh Vue.js untuk suntikan kebergantungan. Berikut adalah beberapa penyelesaian yang mungkin.

1. Props

Kaedah yang sangat mudah ialah menggunakan prop untuk pemindahan data. Dalam komponen induk, data yang perlu disuntik boleh dihantar ke komponen anak melalui prop. Dalam komponen kanak-kanak, data ini boleh diperolehi melalui ini.$props.

Berikut ialah contoh kod:

// 父组件
<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>

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

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

// 子组件
<template>
  <div>
    <p>{{ $props.message }}</p>
  </div>
</template>

2. $attrs dan $listeners

Cara lain ialah menggunakan atribut $attrs dan $listeners. Atribut $attrs boleh menghantar atribut dalam komponen induk yang tidak diterima oleh prop komponen anak kepada komponen anak dan atribut $listeners boleh menghantar peristiwa dalam komponen induk kepada komponen anak.

Berikut ialah contoh kod:

// 父组件
<template>
  <div>
    <ChildComponent v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ $attrs.message }}</p>
    <button @click="$listeners.click">点击我</button>
  </div>
</template>

3 EventBus

Kaedah lain ialah menggunakan EventBus untuk menyampaikan acara. Dalam Vue.js, kita boleh mencapai komunikasi antara komponen dengan mencipta EventBus global.

Berikut ialah contoh kod:

// EventBus.js
import Vue from 'vue';
export default new Vue();

// 父组件
<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello World');
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    EventBus.$on('message', (message) => {
      this.message = message;
    });
  }
};
</script>

Ringkasan

Dalam Vue.js, kami sering menggunakan provide dan inject untuk suntikan kebergantungan, tetapi kadangkala kami menghadapi masalah yang menyediakan dan suntikan tidak boleh digunakan dengan betul. Artikel ini memperkenalkan punca masalah ini dan tiga penyelesaian: menggunakan props, $attrs dan $listeners, dan EventBus. Saya harap artikel ini dapat membantu anda menyelesaikan masalah ini dan meningkatkan keupayaan teknikal anda dalam pembangunan Vue.js.

Atas ialah kandungan terperinci Cara menyelesaikan ralat Vue: Tidak dapat menggunakan menyediakan dan menyuntik dengan betul untuk suntikan pergantungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!