What are the implementation methods of Vue component communication?

Vue.js is a popular front-end framework that provides a component-based development approach to build complex interactive applications. In Vue, communication between components is a very important part. It can help us share and coordinate data and improve development efficiency. This article will introduce several implementation methods of component communication in Vue, and attach corresponding code examples.

1. props and $emit methods

props and $emit are the most basic and commonly used component communication methods in Vue. props are used to pass data from the parent component to the child component, and the $emit method is used to trigger custom events in the child component and pass data to the parent component.

Example:

// Parent component
d477f9ce7bf77f53fbcf36bec1b69b7a
5c94db7c9f0fa17f623df6c8ed7386d9< ;/child-component>
// Use props to pass data to the child component and listen to events triggered by the child component through @my-event
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

data() {
  return {
    message: 'Hello Vue!'
  }
},
methods: {
  handleEvent(data) {
    console.log(data);
  }
}

}
2cacc6d41bbb37262a98f745aa00fbf0

// Subcomponent
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="sendMessage">发送消息</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

props: ['message'], // 接收父组件传递的数据
methods: {
  sendMessage() {
    this.$emit('my-event', 'Hello Parent!'); // 触发自定义事件，并传递数据给父组件
  }
}

}
2cacc6d41bbb37262a98f745aa00fbf0

2. $parent and $children properties

The $parent and $children properties are used inside a component to access instances of its parent or child components.

Example:

// Parent component
d477f9ce7bf77f53fbcf36bec1b69b7a
6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import childComponent from './ChildComponent.vue';

export default {

components: {
  'child-component': childComponent
},
mounted() {
  console.log(this.$children); // 访问子组件实例
}

}
2cacc6d41bbb37262a98f745aa00fbf0

// Child component
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

子组件

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

27835793f4768f4164d1421d99e293bc
export default {

mounted() {
  console.log(this.$parent); // 访问父组件实例
}

}
2cacc6d41bbb37262a98f745aa00fbf0

3. $refs attribute

$refs attribute can be found in The parent component obtains the instance of the child component through the ref attribute, thereby directly operating the properties and methods of the child component.

Example:

// Parent component
d477f9ce7bf77f53fbcf36bec1b69b7a
2012ba5eb230b7164cbd8e135501aa9353b801b01e70268453ed301cb998e90c
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

mounted() {
  console.log(this.$refs.childRef); // 获取子组件实例
  this.$refs.childRef.sendMessage(); // 调用子组件的方法
}

}
2cacc6d41bbb37262a98f745aa00fbf0

// Subcomponent
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

子组件

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

methods: {
  sendMessage() {
    console.log('Hello Parent!');
  }
}

}
2cacc6d41bbb37262a98f745aa00fbf0

These are several implementation methods for Vue component communication. In actual development, choosing the appropriate communication method according to specific needs and scenarios can effectively improve development efficiency and code quality. I hope this article will help you understand Vue component communication.

The above is the detailed content of What are the implementation methods of Vue component communication?. For more information, please follow other related articles on the PHP Chinese website!