Vue3 で関数を提供および挿入: コンポーネント間の効率的なデータ転送

Vue3 の Provide 関数と Inject 関数は、コンポーネント間で効率的にデータを転送するための推奨ソリューションとなっています。新しいメカニズムを使用して、子コンポーネントが祖先コンポーネントのデータを取得し、同時に親コンポーネントの祖先コンポーネントのデータを更新できるようにします。これにより、複雑で柔軟なアプリケーションを構築するための無限の可能性が提供されます。この記事では、読者がその動作原理と使用法をよりよく理解できるように、Vue3 の Provide 関数と Inject 関数について詳しく説明します。

1. provide 関数と inject 関数とは何ですか?

provide 関数と inject 関数は Vue3 の新機能で、props や $emit とは異なるデータ転送方法を提供します。 Provide 関数はデータを提供するために使用され、inject 関数はデータを注入するために使用されます。 Provide 関数は、子コンポーネントに提供する必要があるデータを含むオブジェクトをパラメーターとして受け取ります。 inject 関数は、配列またはオブジェクトをパラメータとして受け取ります。この配列またはオブジェクトには、祖先コンポーネントから注入する必要があるデータが含まれています。 Provide 関数と Inject 関数は、同じ祖先コンポーネントと子孫コンポーネントの間でのみデータを渡すことができ、コンポーネント間でデータを渡すことはできないことに注意してください。

2. provide 関数と inject 関数の仕組み

Vue3 では、provide 関数と inject 関数は新しいメカニズムを使用してデータ転送を実現します。このメカニズムは Vue のカスタム レンダリング関数に基づいており、新しいコンテキスト API を使用してデータを提供および挿入できます。

provide 関数では、provide 属性を設定することでデータを提供できます。例:

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

この例では、data という名前のルート コンポーネントにデータを提供します。その値は次のとおりです。 「これはデータです」。次に、サブコンポーネントで inject 関数を使用して、このデータを注入できます:

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

サブコンポーネントでは、inject 属性を通じてデータを注入します。この属性には、注入する必要があるデータの名前が含まれている必要があります、たとえばここでは data という名前のデータを注入しました。子コンポーネントでは、props と同様に、挿入されたデータにアクセスできます。

inject 関数が子コンポーネントで使用されているが、provide 関数が注入する必要があるデータを提供しない場合、注入されたデータは未定義になることに注意してください。

3. provide 関数と inject 関数の使用方法

provide 関数と inject 関数を使用する場合は、次の点に注意する必要があります。

(1)provide inject関数は、同じ祖先コンポーネントと子孫コンポーネント間でのみデータを受け渡しでき、コンポーネントをまたいでデータを受け渡すことはできません。

(2) Provide 関数で提供されるデータは、関数、オブジェクトなど、任意のタイプにすることができます。

(3) inject 関数を使用して挿入されたデータは、デフォルトでは読み取り専用です。つまり、祖先コンポーネントのデータを子コンポーネントで変更することはできません。祖先コンポーネントのデータを変更する場合は、祖先コンポーネントでメソッドを提供し、子コンポーネントでそのメソッドを呼び出してデータを更新する必要があります。

(4) Provide 関数と Inject 関数を実装する場合、Symbol タイプを使用してデータを提供または注入できます。これにより、データが誤って変更されるのを防ぐことができます。

(5) Provide を使用してデータを提供する場合、setup 関数で ref 関数または reactive 関数を使用して応答性の高いデータを作成できます。これにより、データをサブコンポーネントで直接使用して自動的に応答できます。データの変更に。

以下は、単純な TodoList を実装し、provide 関数と inject 関数を使用してデータを転送する完全な使用例です:

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')

この場合、このコンポーネントで TodoList コンポーネントを定義します。 , todos メソッドと addTodo メソッドの 2 つのデータを提供するには、provide 関数を使用します。このうち、todos はすべての todo 情報を格納するために使用される応答性の高い配列であり、新しい todo を追加するには addTodo メソッドが使用されます。サブコンポーネント TodoItem では、inject 関数を使用して todo データを挿入し、props 属性を使用して渡された todo データを受け取ります。このコンポーネントでは、todo の Done 状態を更新する toggleTodo メソッドを定義し、テンプレート内の Todo のテキスト、done 属性、toggleTodo メソッドを使用します。最後に、ルート コンポーネントを作成し、レンダリングのために TodoList をルート コンポーネントに挿入します。

このケースのデモンストレーションを通じて、provide 関数と inject 関数を使用してコンポーネント間の効率的なデータ転送を実現する方法を確認できます。単純な小さなコンポーネントを開発する場合でも、複雑で柔軟なアプリケーションを構築する場合でも、provide 関数と inject 関数を使用すると、コンポーネントをより適切に整理し、開発効率を向上させることができます。

以上がVue3 で関数を提供および挿入: コンポーネント間の効率的なデータ転送の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。