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

<script> <br> export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { message: 'Hello Vue!' } }, methods: { handleEvent(data) { console.log(data); } }</pre><div class="contentsignin">Copy after login</div></div><p>}<br></script>

// Subcomponent

<script><br> export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>props: ['message'], // 接收父组件传递的数据 methods: { sendMessage() { this.$emit('my-event', 'Hello Parent!'); // 触发自定义事件，并传递数据给父组件 } }</pre><div class="contentsignin">Copy after login</div></div><p>}<br></script>

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

<script><br> import childComponent from './ChildComponent.vue';</p><p>export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>components: { 'child-component': childComponent }, mounted() { console.log(this.$children); // 访问子组件实例 }</pre><div class="contentsignin">Copy after login</div></div><p>}<br></script>

// Child component

< script>
export default {

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

}

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

<script><br> export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>mounted() { console.log(this.$refs.childRef); // 获取子组件实例 this.$refs.childRef.sendMessage(); // 调用子组件的方法 }</pre><div class="contentsignin">Copy after login</div></div><p>}<br></script>

// Subcomponent

<script><br> export default {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>methods: { sendMessage() { console.log('Hello Parent!'); } }</pre><div class="contentsignin">Copy after login</div></div><p>}<br></script>

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!