Web Front-end
JS Tutorial
Detailed explanation of the operation of $emit and $on parent-child sibling components in vue
Detailed explanation of the operation of $emit and $on parent-child sibling components in vue
This time I will bring you a detailed explanation of the operation of $emit and $on parent-child and brother components in vue. What are the precautions for the operation of $emit and $on parent-child and brother components in vue. The following is a practical case. Let’s take a look.
There are three main transmission methods:
1. Communication from parent component to child component
2. Communication from child component to parent component
3. Communication between sibling components
1. Parent component passes value to child component
Parent component passes values to child component using props
//父组件：parent.vue
<template>
<p>
<child :vals = "msg"></child>
</p>
</template>
<script>
import child from "./child";
export default {
data(){
return {
msg:"我是父组件的数据，将传给子组件"
}
},
components:{
child
}
}
</script>
//子组件：child.vue
<template>
<p>
{{vals}}
</p>
</template>
<script>
export default {
props:{ //父组件传值 可以是一个数组，对象
vals:{
type:String,//类型为字符窜
default:"123" //可以设置默认值
}
},
}
</script>2. Communication from child component to parent component
Use $emit(eventname,option) Trigger event,
Parameter 1: Customize the event name, written in lowercase or connected with -, such as event, event-name cannot be written in camel case (eventName)
The sub-component passes the value to the parent component and can be used in the sub-component The value of the event triggered by $emit is passed out, and the parent component obtains the data through event monitoring.
However, there is a problem here.
1. It is the child component that actively transmits data to the parent component. The parent component listens and receives (it is determined by the operation in the child component when to pass the value)
2. Or it is the parent component that determines when the child component passes the value to the parent component, and then listens and receives (it is determined by the operation in the parent component) When to pass the value)
Both cases exist
2.1: $meit event trigger, customized through event trigger inside sub-component Event $emit
2.2: The $meit event is triggered. The custom event $emit
can be triggered by the event of the parent component operating the child component (ref). The first case:
//父组件：parent.vue
<template>
<p>
<child v-on:childevent='wathChildEvent'></child>
<p>子组件的数据为：{{msg}}</p>
</p>
</template>
<script>
import child from "./child";
export default {
data(){
return{
msg:""
}
},
components:{
child
},
methods:{
wathChildEvent:function(vals){//直接监听 又子组件触发的事件，参数为子组件的传来的数据
console.log(vals);//结果：这是子组件的数据，将有子组件操作触发传给父组件
this.msg = vlas;
}
}
}
</script>
//子组件：child.vue
<template>
<p>
<input type="button" value="子组件触发" @click="target">
</p>
</template>
<script>
export default {
data(){
return {
texts:'这是子组件的数据，将有子组件操作触发传给父组件'
}
},
methods:{
target:function(){ //有子组件的事件触发 自定义事件childevent
this.$emit('childevent',this.texts);//触发一个在子组件中声明的事件 childEvnet
}
},
}
</script>Second case:
//父组件：parent.vue
<template>
<p>
<child v-on:childevent='wathChildEvent' ref="childcomp"></child>
<input type="button" @click="parentEnvet" value="父组件触发" />
<p>子组件的数据为：{{msg}}</p>
</p>
</template>
<script>
import child from "./child";
export default {
data(){
return{
msg:""
}
},
components:{
child
},
methods:{
wathChildEvent:function(vals){//直接监听 又子组件触发的事件，参数为子组件的传来的数据
console.log(vals);//这是子组件的数据，将有子组件操作触发传给父组件
this.msg = vlas;
},
parentEnvet:function(){
this.$refs['childcomp'].target(); //通过refs属性获取子组件实例，又父组件操作子组件的方法触发事件$meit
}
}
}
</script>
//子组件：child.vue
<template>
<p>
<!-- dothing..... -->
</p>
</template>
<script>
export default {
data(){
return {
texts:'这是子组件的数据，将有子组件操作触发传给父组件'
}
},
methods:{
target:function(){ //又子组件的事件触发 自定义事件childevent
this.$emit('childevent',this.texts);//触发一个在子组件中声明的事件 childEvnet
}
},
}
</script>Comparing the two situations, the difference lies in whether the $emit custom event is triggered by a parent component or a child component To trigger
The first way is to define a click event in the child component to trigger the custom event $emit, and then listen to it in the parent component
The second way is to use it in the parent component For the first click event, obtain the instance method through refs in the component to directly trigger the event, and then listen in the parent component
3. Communication between sibling components
(1) , Transfer data between brothers through events
(2) Create a new Vue instance so that each brother shares the same event mechanism. (Key points)
(3) When passing data, $emit (method name, passed data) is triggered through events.
(4) The data receiving party triggers the event $on (method name, callback (received data)) in the mounted() hook function (mounted instance). At this time, this in the callback function Changes have been made to use arrow functions.
//建立一个空的Vue实例,将通信事件挂载在该实例上
//emptyVue.js
import Vue from 'vue'
export default new Vue()
//兄弟组件a:childa.vue
<template>
<p>
<span>A组件->{{msg}}</span>
<input type="button" value="把a组件数据传给b" @click ="send">
</p>
</template>
<script>
import vmson from "./emptyVue"
export default {
data(){
return {
msg:"我是a组件的数据"
}
},
methods:{
send:function(){
vmson.$emit("aevent",this.msg)
}
}
}
</script>
//兄弟组件b:childb.vue
<template>
<p>
<span>b组件,a传的的数据为->{{msg}}</span>
</p>
</template>
<script>
import vmson from "./emptyVue"
export default {
data(){
return {
msg:""
}
},
mounted(){
vmson.$on("aevent",(val)=>{//监听事件aevent，回调函数要使用箭头函数;
console.log(val);//打印结果：我是a组件的数据
this.msg = val;
})
}
}
</script>
//父组件：parent.vue
<template>
<p>
<childa><childa>
<childb></childb>
</p>
</template>
<script>
import childa from "./childa";
import childb from "./childb";
export default {
data(){
return{
msg:""
}
},
components:{
childa,
childb
},
}
</script>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the steps of using less in angular 6
jQuery to achieve seamless carousel and left and right click steps Detailed explanation
The above is the detailed content of Detailed explanation of the operation of $emit and $on parent-child sibling components in vue. 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 install the Windows 10 old version component DirectPlay
Dec 28, 2023 pm 03:43 PM
Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box
PyCharm usage tutorial: guide you in detail to run the operation
Feb 26, 2024 pm 05:51 PM
PyCharm is a very popular Python integrated development environment (IDE). It provides a wealth of functions and tools to make Python development more efficient and convenient. This article will introduce you to the basic operation methods of PyCharm and provide specific code examples to help readers quickly get started and become proficient in operating the tool. 1. Download and install PyCharm First, we need to go to the PyCharm official website (https://www.jetbrains.com/pyc
What is sudo and why is it important?
Feb 21, 2024 pm 07:01 PM
sudo (superuser execution) is a key command in Linux and Unix systems that allows ordinary users to run specific commands with root privileges. The function of sudo is mainly reflected in the following aspects: Providing permission control: sudo achieves strict control over system resources and sensitive operations by authorizing users to temporarily obtain superuser permissions. Ordinary users can only obtain temporary privileges through sudo when needed, and do not need to log in as superuser all the time. Improved security: By using sudo, you can avoid using the root account during routine operations. Using the root account for all operations may lead to unexpected system damage, as any mistaken or careless operation will have full permissions. and
Linux Deploy operation steps and precautions
Mar 14, 2024 pm 03:03 PM
LinuxDeploy operating steps and precautions LinuxDeploy is a powerful tool that can help users quickly deploy various Linux distributions on Android devices, allowing users to experience a complete Linux system on their mobile devices. This article will introduce the operating steps and precautions of LinuxDeploy in detail, and provide specific code examples to help readers better use this tool. Operation steps: Install LinuxDeploy: First, install
What to do if you forget to press F2 for win10 boot password
Feb 28, 2024 am 08:31 AM
Presumably many users have several unused computers at home, and they have completely forgotten the power-on password because they have not been used for a long time, so they would like to know what to do if they forget the password? Then let’s take a look together. What to do if you forget to press F2 for win10 boot password? 1. Press the power button of the computer, and then press F2 when turning on the computer (different computer brands have different buttons to enter the BIOS). 2. In the bios interface, find the security option (the location may be different for different brands of computers). Usually in the settings menu at the top. 3. Then find the SupervisorPassword option and click it. 4. At this time, the user can see his password, and at the same time find the Enabled next to it and switch it to Dis.
Huawei Mate60 Pro screenshot operation steps sharing
Mar 23, 2024 am 11:15 AM
With the popularity of smartphones, the screenshot function has become one of the essential skills for daily use of mobile phones. As one of Huawei's flagship mobile phones, Huawei Mate60Pro's screenshot function has naturally attracted much attention from users. Today, we will share the screenshot operation steps of Huawei Mate60Pro mobile phone, so that everyone can take screenshots more conveniently. First of all, Huawei Mate60Pro mobile phone provides a variety of screenshot methods, and you can choose the method that suits you according to your personal habits. The following is a detailed introduction to several commonly used interceptions:
Angular components and their display properties: understanding non-block default values
Mar 15, 2024 pm 04:51 PM
The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.
How to open the settings of the old version of win10 components
Dec 22, 2023 am 08:45 AM
Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open
