Vue component communication: using $set for dynamic data transfer

Vue component communication: using $set for dynamic data transfer

Data transfer between components is a very common requirement in Vue development. In Vue, you can use $emit and $on to achieve communication between parent and child components. In most cases, this approach is sufficient. However, when we need to add or delete data dynamically, using $set becomes a better choice.

Vue provides a $set method, which can be used to add a responsive property to a Vue instance object or responsive object. This dynamic data addition can flexibly meet our needs during the development process.

The following is an example of using $set for dynamic data passing:

Suppose we have two components: Parent and Child. The Parent component contains a button, and when the button is clicked, some dynamic data will be passed to the Child component.

// Parent.vue 文件
<template>
  <div>
    <button @click="sendData">传递数据</button>
    <Child :data="data" @updateData="updateData"></Child>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {}
    }
  },
  methods: {
    sendData() {
      this.$set(this.data, 'message', 'Hello, Child!')
    },
    updateData(newData) {
      this.data = newData
    }
  }
}
</script>

In the Parent component, we define a responsive object named data and pass it to the Child component as props. When the button is clicked, we use the $set method to add a property called message to the data object and set its value to 'Hello, Child!'. This achieves dynamic data transfer.

// Child.vue 文件
<template>
  <div>
    <p>{{ data.message }}</p>
  </div>
</template>

<script> 
export default {
  props: ['data'],
  watch: {
    data: function(newData) {
      this.$emit('updateData', newData)
    }
  }
}
</script>

In the Child component, we receive the data object passed by the Parent component and render it into the template. We do not directly modify the data in props, but monitor the changes in props and trigger an event to pass the new data to the Parent component.

In the parent component, we define a method updateData to receive new data passed by the Child component and update the data object of the parent component. This method ensures the one-way flow of data and conforms to Vue's design principles.

Summary:

Communication between Vue components is a common requirement in the Vue development process. We can use the $emit and $on methods of parent and child components to achieve data transfer. However, when we need to add or delete data dynamically, using the $set method can better meet our needs. By using the $set method, we can dynamically add a responsive attribute to the Vue instance object or responsive object to achieve dynamic data transfer. During the development process, we should choose the most appropriate communication method according to specific needs to ensure the maintainability and scalability of the code.

The above is the detailed content of Vue component communication: using $set for dynamic data transfer. For more information, please follow other related articles on the PHP Chinese website!