Vue3에서 기능 제공 및 주입: 구성 요소 간 효율적인 데이터 전송

Vue3의 제공 및 주입 기능은 구성 요소 간의 효율적인 데이터 전송을 위해 선호되는 솔루션이 되었습니다. 새로운 메커니즘을 사용하여 하위 구성 요소가 상위 구성 요소의 데이터를 얻고 상위 구성 요소의 상위 구성 요소에 있는 데이터를 업데이트할 수 있도록 하여 복잡하고 유연한 애플리케이션을 구축할 수 있는 무한한 가능성을 제공합니다. 이 기사에서는 독자가 작동 원리와 사용법을 더 잘 이해할 수 있도록 Vue3의 제공 및 주입 기능에 대해 자세히 설명합니다.

1. 제공 및 주입 기능은 무엇인가요?

provide 및 inject 기능은 Vue3의 새로운 기능으로 props 및 $emit와는 다른 데이터 전송 방법을 제공합니다. Provide 함수는 데이터를 제공하는 데 사용되고, Inject 함수는 데이터를 주입하는 데 사용됩니다. 제공 함수는 하위 구성 요소에 제공해야 하는 데이터가 포함된 개체를 매개 변수로 받습니다. 주입 함수는 배열이나 개체를 매개변수로 받습니다. 이 배열이나 개체에는 상위 구성 요소에서 주입해야 하는 데이터가 포함되어 있습니다. 제공 및 주입 기능은 동일한 상위 구성 요소와 하위 구성 요소 간에만 데이터를 전달할 수 있으며 구성 요소 간에는 전달할 수 없다는 점에 유의해야 합니다.

2. 제공 및 주입 기능의 작동 방식

Vue3에서 제공 및 주입 기능은 데이터 전송을 달성하기 위해 새로운 메커니즘을 사용합니다. 이 메커니즘은 Vue의 사용자 정의 렌더링 기능을 기반으로 하며, 이를 통해 새로운 컨텍스트 API를 사용하여 데이터를 제공하고 주입할 수 있습니다.

provider 함수에서 제공 속성을 설정하여 데이터를 제공할 수 있습니다. 예:

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

이 예에서는 이름이 data인 루트 구성 요소에 데이터를 제공하고 해당 값은 'this is data'입니다. 다음으로, 하위 구성 요소에서 inject 함수를 사용하여 이 데이터를 주입할 수 있습니다.

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

하위 구성 요소에서는 inject 속성을 통해 데이터를 주입합니다. 이 속성에는 주입해야 하는 데이터의 이름이 포함되어야 합니다. 여기에 이름을 삽입하면 데이터의 데이터가 됩니다. 하위 구성 요소에서는 props처럼 삽입된 데이터에 액세스할 수 있습니다.

주입 기능이 하위 구성 요소에 사용되었지만 제공 기능이 주입되어야 하는 데이터를 제공하지 않는 경우 주입된 데이터는 정의되지 않습니다.

3. provider 및 inject 함수 사용 방법

provider 및 inject 함수 사용 시 다음 사항에 주의해야 합니다.

(1) Provide 및 inject 함수는 동일한 조상 간에만 전달할 수 있습니다. 구성 요소 및 하위 구성 요소 데이터는 구성 요소 간에 전달될 수 없습니다.

(2) 제공 함수에 제공되는 데이터는 함수, 객체 등을 포함한 모든 유형이 될 수 있습니다.

(3) 주입 함수를 사용하여 주입된 데이터는 기본적으로 읽기 전용입니다. 즉, 상위 구성 요소의 데이터는 하위 구성 요소에서 변경할 수 없습니다. 조상 컴포넌트의 데이터를 변경하려면 조상 컴포넌트에 메서드를 제공하고 자식 컴포넌트에서 해당 메서드를 호출하여 데이터를 업데이트해야 합니다.

(4) 제공 및 주입 기능을 구현할 때 기호 유형을 사용하여 데이터를 제공하거나 주입할 수 있으므로 실수로 데이터가 수정되는 것을 방지할 수 있습니다.

(5) 데이터를 제공하기 위해 제공을 사용할 때 설정 함수의 ref 또는 반응 함수를 사용하여 반응형 데이터를 생성할 수 있으므로 데이터를 하위 구성 요소에서 직접 사용할 수 있고 데이터 변경에 자동으로 응답할 수 있습니다.

다음은 간단한 TodoList를 구현하고 제공 및 삽입 기능을 사용하여 데이터를 전송하는 완전한 사용 사례입니다.

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 메소드용. 그 중 todos는 모든 할일 정보를 저장하는 데 사용되는 반응형 배열이고, addTodo 메소드는 새로운 할일을 추가하는 데 사용됩니다. 하위 구성요소인 TodoItem에서는 inject 함수를 사용하여 할 일 데이터를 주입하고 props 속성을 사용하여 전달된 할 일 데이터를 받습니다. 이 구성 요소에서는 todo의 완료 상태를 업데이트하기 위해ggleTodo 메서드를 정의한 다음 템플릿에서 todo의 텍스트, 완료 속성 및ggleTodo 메서드를 사용합니다. 마지막으로 루트 구성 요소를 만들고 렌더링을 위해 루트 구성 요소에 TodoList를 삽입합니다.

이 사례의 시연을 통해 구성 요소 간 효율적인 데이터 전송을 달성하기 위해 제공 및 주입 기능을 사용하는 방법을 확인할 수 있습니다. 간단한 작은 구성요소를 개발하든, 복잡하고 유연한 애플리케이션을 구축하든, 제공 및 주입 기능을 사용하면 구성요소를 더 잘 구성하고 개발 효율성을 향상시킬 수 있습니다.

위 내용은 Vue3에서 기능 제공 및 주입: 구성 요소 간 효율적인 데이터 전송의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!