搜索
首页web前端js教程vue中$emit 与$on父子兄弟组件操作详解

这次给大家带来vue中$emit 与$on父子兄弟组件操作详解,vue中$emit 与$on父子兄弟组件操作的注意事项有哪些,下面就是实战案例,一起来看一下。

主要的传输方式有三种:

1.父组件到子组件通信

2.子组件到父组件的通信

3.兄弟组件之间的通信

一、父组件传值给子组件

父组件给子组件传子,使用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.子组件到父组件的通信

使用 $emit(eventname,option) 触发事件,

参数一:自定义事件名称,写法,小写或者用-连接,如event,event-name 不能写驼峰写法(eventName)

子组件给父组件传值,可以在子组件中使用$emit触发事件的值传出去,父组件通过事件监听,获取数据

但是,这里有一个问题,

1、究竟是由子组件内部主动传数据给父组件,由父组件监听接收(由子组件中操作决定什么时候传值)

2、还是通过父组件决定子组件什么时候传值给父组件,然后再监听接收 (由父组件中操作决定什么时候传值)

两种情况都有

2.1 : $meit事件触发,通过子组件内部的事件触发自定义事件$emit

2.2 : $meit事件触发, 可以通过父组件操作子组件 (ref)的事件来触发 自定义事件$emit

第一种情况:

//父组件:parent.vue
<template>
  <p>
    <child v-on:childevent=&#39;wathChildEvent&#39;></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>

第二种情况:

//父组件:parent.vue
<template>
  <p>
    <child v-on:childevent=&#39;wathChildEvent&#39; 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>

将两者情况对比,区别就在于$emit 自定义事件的触发是有父组件还是子组件去触发

第一种,是在子组件中定义一个click点击事件来触发自定义事件$emit,然后在父组件监听

第二种,是在父组件中第一一个click点击事件,在组件中通过refs获取实例方法来直接触发事件,然后在父组件中监听

3.兄弟组件之间的通信

 (1)、兄弟之间传递数据通过事件

 (2)、创建一个新Vue的实例,让各个兄弟共用同一个事件机制。(关键点)

 (3)、传递数据方,通过事件触发$emit(方法名,传递的数据)。

 (4)、接收数据方,在mounted()钩子函数(挂载实例)中 触发事件$on(方法名,callback(接收数据的数据)),此时callback函数中的this已经发生了改变,可以使用箭头函数。

//建立一个空的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>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

angular 6中使用less步骤详解

jQuery实现无缝轮播与左右点击步骤详解

以上是vue中$emit 与$on父子兄弟组件操作详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
PHP编程中有哪些常见的Behat操作?PHP编程中有哪些常见的Behat操作?Jun 12, 2023 am 08:19 AM

PHP编程中有哪些常见的Behat操作?Behat是一个行为驱动开发(BDD)工具,允许测试人员和开发人员在自然语言中撰写测试用例,并将这些用例转化为可执行的代码。它支持PHP语言,并提供了丰富的库和功能,可以实现多种常见的测试操作。下面列举了PHP编程中常见的Behat操作。前置条件(Background)在编写测试用例时,有时候会有一些公共的前置条件需要

Vue3中props和emit怎么使用Vue3中props和emit怎么使用May 26, 2023 pm 06:13 PM

作用:父组件通过props向下传递数据给子组件;用途:当有一种类型的组件需要被使用多次,每一次的调用都只是特定的地方不同,就好像一张个人简介表,每次填的人的信息都不同,但是结构都是一样的。用法1(不指定类型的简单接受):在父组件里面引入子组件,通过子组件的标签属性传递参数,在子组件里面定义一个props选项进行接收使用,要注意在子组件里面不需要在props以外的地方事先定义在上面可以看见传进来的age是一个字符串类型,如果想要让传进来的值自动加1不能在子组件使用时里面+1,如下图所示会变成字符串

ThinkPHP6如何进行表单验证操作?ThinkPHP6如何进行表单验证操作?Jun 12, 2023 am 09:36 AM

ThinkPHP6是一款基于PHP的MVC框架,极大地简化了Web应用程序的开发。其中表单验证是一个非常基础和重要的功能。在这篇文章中,我们将介绍ThinkPHP6中如何进行表单验证操作。一、验证规则定义在ThinkPHP6中,验证规则都需要定义在控制器中,我们可以通过在控制器中定义一个$validate属性来实现规则的定义,如下所示:usethinkVa

PHP编程中有哪些常见的jQuery操作?PHP编程中有哪些常见的jQuery操作?Jun 12, 2023 am 10:38 AM

PHP编程中有哪些常见的jQuery操作?在PHP编程中,使用jQuery进行网页开发是一种非常方便和高效的方式。jQuery是一个简单而强大的JavaScript库,包含了许多实用的方法和函数。在PHP编程中,我们常常使用jQuery来操纵HTML和DOM元素,使网页具有更好的交互性和高度的可视化效果。在本文中,我们将介绍一些常见的PHP编程中使用jQue

PHP编程中有哪些常见的OAuth操作?PHP编程中有哪些常见的OAuth操作?Jun 12, 2023 am 08:48 AM

OAuth(开放授权)是一种用于授权访问控制的标准化协议。在Web开发中,使用OAuth可以帮助应用程序安全地从第三方平台中获取用户数据或资源。而在PHP编程中,OAuth操作也被广泛应用。本文将介绍PHP编程中的常见OAuth操作。OAuth1.0a授权OAuth1.0a授权是OAuth中最早出现的授权方式,也是最复杂的一种授权方式。在PHP编程中,O

怎样使用ThinkPHP6进行多语言翻译操作?怎样使用ThinkPHP6进行多语言翻译操作?Jun 12, 2023 am 08:49 AM

随着全球化的发展,越来越多的网站和应用程序需要提供多语言支持。而对于使用ThinkPHP6框架的开发者来说,如何实现多语言翻译操作是一个重要的需求。本文将介绍怎样使用ThinkPHP6进行多语言翻译操作。配置语言包在ThinkPHP6中,语言包是一个包含键值对的数组。可以将其存储在app/lang/目录下的各种子目录中。例如:/app/lang/zh-cn/

PHP编程中有哪些常见的Ajax操作?PHP编程中有哪些常见的Ajax操作?Jun 12, 2023 am 08:26 AM

随着Web应用程序的发展,Ajax成为了一种重要的技术,在PHP编程中也得到了广泛的应用。通过Ajax技术,Web应用程序可以实现异步操作,从而提高了用户体验和应用程序性能。在本文中,我们将探讨PHP编程中常见的Ajax操作。一、Ajax基础知识在介绍常见的Ajax操作之前,我们先来了解一下Ajax技术的基础知识。Ajax全称为"AsynchronousJ

怎样在ThinkPHP6中进行captcha图形验证码操作?怎样在ThinkPHP6中进行captcha图形验证码操作?Jun 12, 2023 am 11:45 AM

随着互联网的快速发展,基于图形的验证码已经成为了网站安全保障的一个重要环节。验证码可以有效地防止机器人或恶意程序对网站进行自动化操作,同时也可以保障用户信息的安全性。而在基于ThinkPHP6的网站开发中,如何实现captcha图形验证码的操作呢?本文将为您介绍具体的操作流程。一、生成Captcha图形验证码1、使用captcha库进行安装在ThinkPHP

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器