Vue component communication: How to communicate between parent and child components?

Vue component communication: How to communicate between parent and child components?

Vue is a popular JavaScript framework that provides a component-based way to build web applications. In actual development, we often encounter situations where communication between parent and child components is required. This article will introduce some commonly used parent-child component communication methods in Vue and provide corresponding code examples.

Props

Props is the most commonly used communication method between parent and child components in Vue. It allows parent components to pass data to child components. In child components, props are declared as an array or object, used to receive data passed by the parent component.

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

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

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: ['message']
};
</script>

In the above example, the parent component passes a prop named message to the child component. The subcomponent declares a property with the same name through the props array to receive the passed data. In the template of the child component, the received data can be displayed through the interpolation expression {{ message }}.

Emit

In addition to passing data from the parent component to the child component, we often also need to send data from the child component to the parent component or trigger an event. Vue provides a way for child components to communicate with parent components through Emit.

<!-- 父组件 -->
<template>
  <div>
    <child-component @rating-updated="updateRating"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    updateRating(rating) {
      // 处理子组件发出的rating更新事件
      console.log('Rating updated:', rating);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    ...
    <button @click="updateRating">Update Rating</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateRating() {
      const rating = 5; // 子组件的评分数据
      this.$emit('rating-updated', rating);
    }
  }
};
</script>

In the above example, the button click event in the child component triggers the updateRating method and sends a message named rating- to the parent component through this.$emit('rating-updated', rating) updated custom event, and passed the rating data rating. Use @rating-updated="updateRating" in the parent component to listen to the rating-updated event emitted by the child component and handle the event in the updateRating method.

$refs

Sometimes, we need to directly access the properties or methods of a child component from the parent component. Vue provides the $refs attribute to implement this direct access method.

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.childMethod();
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    Child Component
  </div>
</template>
<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called.');
    }
  }
};
</script>

In the above example, the button click event in the parent component calls the callChildMethod method. Inside the method, this.$refs.childComponent is used to access the child component and call the childMethod method of the child component.

Provide/Inject

Provide/Inject is an advanced component communication method that allows ancestor components to provide data to all descendant components without explicitly going layer by layer. transfer. This communication method is suitable for communication between cross-level components.

<!-- 祖先组件 -->
<template>
  <div>
    ...
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor component!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <grandchild-component></grandchild-component>
  </div>
</template>
<script>
import GrandchildComponent from './GrandchildComponent.vue';

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

<!-- 孙子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
};
</script>

In the above example, the ancestor component provides a data named message to the descendant component through the provide method. The grandson component injects this data through inject: ['message'] and displays it using {{ message }} in the template.

The above introduces the commonly used parent-child component communication methods in Vue. Each method has its applicable scenarios. In actual development, appropriate communication methods can be selected according to specific needs. I hope this article will help you understand Vue component communication!

Reference link:

• [Vue Document - Component Communication](https://cn.vuejs.org/v2/guide/components.html#Parent-Child Component Communication)

The above is the detailed content of Vue component communication: How to communicate between parent and child components?. For more information, please follow other related articles on the PHP Chinese website!