Vue.js component communication example sharing
Because I am very interested in Vue.js, and the technology stack I usually work on is also Vue.js, I spent some time studying the Vue.js source code in the past few months, and made a summary and output. Components are one of the most powerful features of Vue.js. Components can extend HTML elements, encapsulating reusable code. This article will share with you several postures for Vue.js component communication. Friends who are interested should take a look.
Written in front
There may be deviations in understanding. Welcome to raise issues and point out, learn together and make progress together.
What is a Vue component?
Component is one of the most powerful features of Vue.js. Components can extend HTML elements, encapsulating reusable code. At a high level, a component is a custom element to which Vue.js's compiler adds special functionality. In some cases, components can also take the form of native HTML elements, extended with the is attribute.
Communication between Vue components
Communication from parent component to child component
Method 1: props
Using props, the parent component can use props to pass to the child component data.
Parent component vue template father.vue
<template>
<child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
data () {
return {
message: 'father message';
}
}
}
</script>Child component vue template child.vue
<template>
<p>{{msg}}</p>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
}
}
</script>Method 2 uses $children
Use $children You can Access child components from parent components.
The child component communicates with the parent component
Method 1: Using vue events
The parent component passes the event method to the child component, and the child component triggers the event through $emit and calls back to the parent components.
Parent component vue template father.vue
<template>
<child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
methods: {
func (msg) {
console.log(msg);
}
}
}
</script>Child component vue template child.vue
<template>
<button @click="handleClick">点我</button>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
},
methods () {
handleClick () {
//........
this.$emit('msgFunc');
}
}
}
</script>Method 2: Modify the parent component data by modifying the props passed by the parent component
This method can only be used when the parent component passes a reference variable. Literal variables cannot achieve the corresponding effect. Because the drinking variable ultimately points to the same memory address, whether it is the data in the parent component or the data in the props obtained by the child component, so modifying the data in the props in the child component modifies the data in the parent component.
But this is not recommended. It is not recommended to directly modify the value of props. If the data is used to display modifications, in actual development I often put it into data and pass it back when needed. The parent component then uses events to return data. This keeps the components independent and decoupled, and does not cause abnormal data flow confusion due to the use of the same data. Data is only transmitted through specific interfaces to modify the data, and the internal data status is managed by specialized data.
Method 3: Use $parent
Use $parent to access the data of the parent component.
Data transfer between non-parent-child components and sibling components
For non-parent-child component communication, Vue officially recommends using a Vue instance as the central event bus.
Vue has an internal event mechanism, you can refer to the source code.
$on method is used to listen to an event.
$emit is used to trigger an event.
/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on('eventName', (val) => {
//......do something
});
/*触发事件*/
event.$emit('eventName', 'this is a message.');Multi-level parent-child component communication:
In Vue1.0, two methods, $broadcast and $dispatch, are implemented to broadcast (or dispatch) to child components (or parent components). When the child component (or parent component) listens to the event and returns true, the event will continue to be broadcast (or dispatched) to the grandchild-level component. But this method has been removed in Vue2.0.
When I was learning about element, the open source component library of Ele.me, I found that they re-implemented the broadcast and dispatch methods and introduced them in the form of mixin. For details, please refer to "Talk about element component library broadcast and dispatch". But it is slightly different from the two method implementations of Vue1.0. These two methods implement the functions of event broadcasting to descendant components and event dispatching to multi-level parent components. But it is not an event broadcast in a broad sense. It needs to specify a commentName to broadcast (dispatch) events to the component with the specified component name.
In fact, the internal implementation of these two methods still uses $parent and $children, which are used to traverse child nodes or query parent nodes step by step. When the specified component name is accessed, $emit is called to trigger Specify event.
Complex single-page application data management
When the application is complex enough, please use vuex for data management.
Related recommendations:
Vue sibling component communication method
Detailed explanation of event bus non-parent-child component communication in vue
Deep dive into Vue.js components and component communication
The above is the detailed content of Vue.js component communication example sharing. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to share Quark Netdisk to Baidu Netdisk?
Mar 14, 2024 pm 04:40 PM
Quark Netdisk and Baidu Netdisk are very convenient storage tools. Many users are asking whether these two softwares are interoperable? How to share Quark Netdisk to Baidu Netdisk? Let this site introduce to users in detail how to save Quark network disk files to Baidu network disk. How to save files from Quark Network Disk to Baidu Network Disk Method 1. If you want to know how to transfer files from Quark Network Disk to Baidu Network Disk, first download the files that need to be saved on Quark Network Disk, and then open the Baidu Network Disk client. , select the folder where the compressed file is to be saved, and double-click to open the folder. 2. After opening the folder, click "Upload" in the upper left corner of the window. 3. Find the compressed file that needs to be uploaded on your computer and click to select it.
How to share NetEase Cloud Music to WeChat Moments_Tutorial on sharing NetEase Cloud Music to WeChat Moments
Mar 25, 2024 am 11:41 AM
1. First, we enter NetEase Cloud Music, and then click on the software homepage interface to enter the song playback interface. 2. Then in the song playback interface, find the sharing function button in the upper right corner, as shown in the red box in the figure below, click to select the sharing channel; in the sharing channel, click the "Share to" option at the bottom, and then select the first "WeChat Moments" allows you to share content to WeChat Moments.
How to share files with friends on Baidu Netdisk
Mar 25, 2024 pm 06:52 PM
Recently, Baidu Netdisk Android client has ushered in a new version 8.0.0. This version not only brings many changes, but also adds many practical functions. Among them, the most eye-catching is the enhancement of the folder sharing function. Now, users can easily invite friends to join and share important files in work and life, achieving more convenient collaboration and sharing. So how do you share the files you need to share with your friends? Below, the editor of this site will give you a detailed introduction. I hope it can help you! 1) Open Baidu Cloud APP, first click to select the relevant folder on the homepage, and then click the [...] icon in the upper right corner of the interface; (as shown below) 2) Then click [+] in the "Shared Members" column 】, and finally check all
Mango tv member account sharing 2023
Feb 07, 2024 pm 02:27 PM
Mango TV has various types of movies, TV series, variety shows and other resources, and users can freely choose to watch them. Mango TV members can not only watch all VIP dramas, but also set the highest definition picture quality to help users watch dramas happily. Below, the editor will bring you some free Mango TV membership accounts for users to use, hurry up and take a look Take a look. Mango TV latest member account free sharing 2023: Note: These are the latest member accounts collected, you can log in directly and use them, do not change the password at will. Account number: 13842025699 Password: qds373 Account number: 15804882888 Password: evr6982 Account number: 13330925667 Password: jgqae Account number: 1703
Solve the problem that Discuz WeChat sharing cannot be displayed
Mar 09, 2024 pm 03:39 PM
Title: To solve the problem that Discuz WeChat shares cannot be displayed, specific code examples are needed. With the development of the mobile Internet, WeChat has become an indispensable part of people's daily lives. In website development, in order to improve user experience and expand website exposure, many websites will integrate WeChat sharing functions, allowing users to easily share website content to Moments or WeChat groups. However, sometimes when using open source forum systems such as Discuz, you will encounter the problem that WeChat shares cannot be displayed, which brings certain difficulties to the user experience.
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
How to share ppt
Mar 20, 2024 pm 07:51 PM
People in the workplace will be familiar with PPT production, because whether it is a year-end summary or a work report, many companies require it to be presented in the form of PPT. At this time, I encountered a problem, that is, how to share PPT? Don’t worry, the editor below will show you how to share PPT. 1. First select the edited PPT and click Save in the upper left corner (if you are using WPS, you can click Login first). 2. Then click the share icon in the menu bar as shown below. 3. Then the sharing interface as shown below will pop up. You can see that a sharing link will appear. Click to send the link to share. 4. You can also click "Allow friends to edit" in the lower left corner of the picture below, so that friends can also click to edit this PPT. 5. If necessary, give P
Share two installation methods for HP printer drivers
Mar 13, 2024 pm 05:16 PM
HP printers are essential printing equipment in many offices. Installing the printer driver on the computer can perfectly solve problems such as the printer being unable to connect. So how to install HP printer driver? The editor below will introduce you to two HP printer driver installation methods. The first method: download the driver from the official website 1. Search the HP China official website in the search engine, and in the support column, select [Software and Drivers]. 2. Select the [Printer] category, enter your printer model in the search box, and click [Submit] to find your printer driver. 3. Select the corresponding printer according to your computer system. For win10, select the driver for win10 system. 4. After downloading successfully, find it in the folder
