精华内容
下载资源
问答
  • 子组件可以通过this.$emit(‘change’, ‘parm’:‘value1’,‘parm2’:‘value2’…)传递多个参数 父组件监听事件传参有两种方式 方式1:父组件自己无参数 方法名可以不用带参数,函数中的e代表change事件的对象,...

    背景

    子组件可以通过this.$emit(‘change’, ‘parm’:‘value1’,‘parm2’:‘value2’…)传递多个参数

    父组件监听事件传参有两种方式

    方式1:父组件自己无参数

    方法名可以不用带参数,函数中的e代表change事件的对象,直接获取参数即可

    <uni-rate value="5" @change="clickStar" :activeColor="star[index[0]].color" size="25.5" margin="6.5" 
    
    clickStar(e){
    				this.$set(this.index,e.value)			
    			}
    

    方式2:父组件传递自己的参数

    父元素引入了多个组件,我们想区分具体是哪个组件触发了change事件

    <uni-rate value="5" @change="clickStar($event,0)" :activeColor="star[index[0]].color" size="25.5" margin="6.5" style="margin:30upx 0upx;">星星</uni-rate>
    <uni-rate value="5" @change="clickStar($event,1)" :activeColor="star[index[0]].color" size="25.5" margin="6.5" style="margin:30upx 0upx;">星星</uni-rate>
    <uni-rate value="5" @change="clickStar($event,2)" :activeColor="star[index[0]].color" size="25.5" margin="6.5" style="margin:30upx 0upx;">星星</uni-rate>
    

    父组件用$event代表change事件对象,后面传递父元素自己的参数

    clickStar(e,idx){
    				this.$set(this.index,idx,e.value-1)			
    			}
    

    事件中根据位置传参,e代表了事件对象,idx代表了父元素自己的第一个参数。

    展开全文
  • 在子组件中,我们可以通过以下方式监听事件:v-on:click="$emit('funcName',a)"如果需要传多个参数,可以通过以下方式:v-on:click="$emit('funcName',{a,b...})"父组件中通过自定义事件来监听子组件的事件比如...

    在子组件中,我们可以通过以下方式监听事件:

    v-on:click="$emit('funcName',a)"

    如果需要传多个参数,可以通过以下方式:

    v-on:click="$emit('funcName',{a,b...})"

    父组件中通过自定义事件来监听子组件的事件

    比如自定义事件名称childlistener

    我们通过以下方式在父组件中进行监听:

    v-on:childlistener="parentMethod($event)",$event就是子组件中传过来的参数

    如果子组件传过来的是一个参数,则$event等于该参数,如果传过来的是一个对象,则$event为该对象,我们可以通过对象的方式获取对应的参数,如$event.a,$event.b ...

    Vue的watch监听事件

    Vue的watch监听事件 相关Html:

    vue子组件的自定义事件

    父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit) 之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧-- 实际上 ...

    vue子组件使用自定义事件向父组件传递数据

    使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据)

    vue&period;js 组件监听

    一.在通过点击事件触发的子组件中: addCart(event) { if (!event._constructed) { return; } if (!this.food.count) { Vue. ...

    Vue使用watch监听一个对象中的属性

    问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedSta ...

    java在线聊天项目0&period;3版本 制作客户端窗体,实现发送按钮和回车发送信息功能,使用ActionListener监听事件中actionPerformed方法(用内部类和匿名内部类两种方法)

    方法一,使用匿名内部类的监听方法,因方法一致代码稍冗余 package com.swift; import java.awt.BorderLayout; import java.awt.Color; ...

    ASP&period;net button类控件click事件中传递参数

    单击Button会同时触发这两个事件,但先执行Click,后执行Command,在button控件中加上参数属性 CommandArgument='' 在click响应函数中可以用以下代码获得传递的参 ...

    如何在element-UI 组件的change事件中传递自定义参数

    以select为例,如果select写在循环里,触发change事件时可能不只需要传递被选中项的值,还要传递index过去,来改变同一循环中的其他标签的状态. 下面这样写是无效的: @change=& ...

    随机推荐

    Java注解基础概念总结

    注解的概念 注解(Annotation),也叫元数据(Metadata),是Java5的新特性,JDK5引入了Metadata很容易的就能够调用Annotations.注解与类.接口.枚举在同一个层次 ...

    Ueditor之前后端源码的学习和简单的研究

    这是我的项目目录 这里写图片描述 1.从访问路径http://localhost:8081/Test/_examples/simpleDemo.html,我们主要是要看看,富文本框被加载出来之前,会调 ...

    removeClass&lpar;&rpar;

    定义和用法 removeClass() 方法从被选元素移除一个或多个类. 注释:如果没有规定参数,则该方法将从被选元素中删除所有类. 语法 $(selector).removeClass(class) ...

    使用FileReader实现前端预览所选图片

    需求描述 在浏览器环境下进开发网站(也就是B/S架构的应用),获取到当前设备上的图片后,希望可以在上传到服务器前简单预览一下图片内容. 具体实现 主要代码 html 部分

    Tensorflow集成接口TensorLayer、Keras

    https://www.zhihu.com/question/50030898 https://zhuanlan.zhihu.com/p/25296966 https://www.jiqizhixin ...

    Nginx代理后服务端使用remote&lowbar;addr获取真实IP

    直奔主题,在代理服务器的Nginx配置(yourWebsite.conf)的location /中添加: #获取客户端IP proxy_set_header Host $host; proxy_set ...

    从 C&num;编写的Exe里面提取图标和图片

    记得原来是可以通过PE直接提取Exe里面的图片的,不知道为什么不能用了,下面是通过加载程序集反射出Resources 里面的图片或者图标: 提取结果直接存放到编译目录了,不知道向左向右,自己又回到Wi ...

    利用selenium webdriver点击alert提示框

    在进行元素定位时常常遇到这样的alert框: 那么该如何定位并点击确定或取消按钮呢?stackoverflow上找到了这个问题的答案. OK, Show you the code: driver.fi ...

    展开全文
  • 父:props接收数据)Vue单向数据流(通过子组件的data复制一份父组件传来的数据作为副本数据,然后再在子组件的methods传递改副本数据)子组件向父组件传递数据(通过$emit触发事件,父组件 绑定事件,即@事件名 去...

    fce5bad78b31f35c257b30ea766dd267.png

    关键词:

    • 父子组件间传值(父->子:属性传递数据;子->父:props接收数据)
    • Vue单向数据流(通过子组件的data复制一份父组件传来的数据作为副本数据,然后再在子组件的methods传递改副本数据)
    • 子组件向父组件传递数据(通过$emit触发事件,父组件 绑定事件,即@事件名 去监听事件)

    注意点:

    • 定义了局部组件,在Vue实例需要注册这个局部组件:components:{ 组件名:组件名 }
    • 通过 :xxx ="x" 这种形式传递数据时,传递的是一个JS表达式,所传数据如果是数字,那就是数据类型,传的也就是一个数字;xxx ="x" 所传的则是一个字符串

    一、父子组件间传值

    1、[ 重点 ] 父组件向子组件传递数据:通过属性传递数据;子组件接收数据:通过props

     <body>
        <div id="root">
    	<counter :count="0"></counter>
    	<counter :count="1"></counter>
        </div>
        <script>
        //局部组件
         var counter = {
            props: ['count'],
            template: '<div>{{count}}</div>'
         }
         var vm = new Vue({
            el: '#root',
            components: {
    	  counter: counter
            }
         })
       </script>
    </body>

    父组件通过属性的形式 向子组件传递一个名为xxx的数据 ;子组件需要接收这个数据,在子组件上使用props,即props: ['xxx'] ,子组件在模板template使用传过来的数据

    2、出现问题:子组件中直接实现计数器的累加数据的功能,但会出现一个报错:

    var counter = {
       props: ['count'],
       template: '<div @click="handleClick">{{count}}</div>',
         methods: {
           handleClick: function(){
              this.count ++   //实现累加的功能
           }
         }
     }

    报错:不要直接修改父组件传递过来的数据

    bd7f75dfa7665810a932ae3db83e0479.png

    解决方法继续往下看⏬

    二、Vue单向数据流

    1、[重点] 单向数据流:父组件可以向子组件通过属性形式传递参数,传递的参数也可以随时随意修改;但子组件不能修改父组件传递过来的参数。!!!只能用父组件传递的数据!!!

    原因:因为子组件接收父组件传递过来的数据,并不是一个基础类型的数据类型,而是类似于object这种引用类型的数据类型。如果修改了引用类型的数据,在使用子组件时,则会造成其他子组件接收数据的错误

    2、问题:如何解决单向数据流存在问题?

    子组件接收到父组件的数据,将接收到的数据复制一份放在子组件定义的data里number(相当于这个数据的副本)。那么就能让子组件使用自己data里的number,进而在子组件的methods里就使用 this.number ++来实现累加数据的功能

    代码如下:

    <script>
       //局部组件
    	var counter = {
    	     props: ['count'],
                 data: function(){
    	          return {
    		      number: this.count
    		  }
    	     },
                 template: '<div @click="handleClick">{{number}}</div>',
                 methods: {
                     handleClick: function(){
             	  this.number ++   //实现累加的功能
                     }
                }
            }
    
    	var vm = new Vue({
    	      el: '#root',
    	      components: {
    	      	  counter: counter
    	      }
    	})
    </script>

    试一下吧:不会报错了

    三、子组件向父组件传值 (通过事件形式($emit)传值 )

    1、实现需求:实现一个计数器,每一次都增加2

    2、问题:让子组件每次点击时,向父组件传递一些内容?

    3、方法:子组件向父组件传值,通过事件的形式,即 this.$emit('事件' , 步长) 来告知父组件新增的参数值;父组件则在页面模板的dom标签添加一个监听事件,即 @事件名="执行方法名",那么一旦子组件做了修改,在父组件就能监听到其改变,在页面就会做出相应的改变

    代码如下:

    <body>
    	<div id="root">
    		  <counter :count="0" @inc="handleIncrease"></counter>
    		  <counter :count="1" @inc="handleIncrease"></counter>
    		  <div>{{total}}</div>
    	</div>
          
    	<script>
    		//局部组件
    	var counter = {
    	     props: ['count'],
    	     data: function(){
    	         return {
    	             number: this.count
    		}
    	      },
                 template: '<div @click="handleClick">{{number}}</div>',
                 methods: {
             	   handleClick: function(){
             	   	this.number = this.number + 2;  //实现累加的功能
             	   	this.$emit('inc', 2)
             	   }
                  }
    	 }
    
    	var vm = new Vue({
    		el: '#root',
    		data: {
    		    total: 1
    		},
    	        components: {
    	      	    counter: counter
    	        },
    	        methods: {
    	      	     handleIncrease: function(){
    	      	  	  alert("inc")
    	      	     }
    	        }
    	})
    	</script>
    </body>

    可以尝试将this.$emit('事件' , 步长) 中参数“步长”在Vue实例methods中作为函数参数值打印出来

    methods: {
    	handleIncrease: function(step){
    	    alert(step)
    	}
    }

    试一下吧,每次点击弹出来的弹窗都出现步长:2

    那么,大招来了,实现每次增加2步长的两组件的总数和。在Vue实例定义methods:

    methods: {
         handleIncrease: function(step){
    	   this.total += 2
         }
    }

    如图:

    d11ed0918126880e522822f556826332.gif
    展开全文
  • 2.0 子传父子组件向父组件传值 :通过$emit事件传递// father.vue接收子组件传递过来的值{{msg}}// 引入的子组件export default {data() {return {msg: "默认值"};},created() {},components:{child:()=> import ...

    1.0 父传子

    父组件向子组件传值:子组件用props:['值'] 接收 ;

    2.0 子传父

    子组件向父组件传值 :通过$emit事件传递

    // father.vue

    接收子组件传递过来的值{{msg}}

    // 引入的子组件

    export default {

    data() {

    return {

    msg: "默认值"

    };

    },

    created() {},

    components:{

    child:()=> import ('./secondChild.vue')

    },

    methods: {

    handle(messge) {

    this.msg = messge;

    console.log(this.msg) // --->子组件中的值

    }

    }

    };

    // child.vue

    向父组件传值

    export default {

    data(){

    return {

    childValue:"子组件中的值"

    }

    },

    created(){},

    methods:{

    sendMsg(){

    this.$emit('eventHandle',this.childValue) // ----> $emit(父组件接收的事件名, 子组件中的值)

    }

    }

    }

    传值前.png

    传值之后页面渲染新值.png

    3.0 eventBus

    01. 创建一个eventBus.js文件

    文件目录 src->assets->js>eventBus.js

    import Vue form 'vue'

    export default new Vue

    02.新建vue

    我是一个组件我需要向其他组件进行传值

    传值

    import bus from 'eventBus文件所在的路径' // --> 如: ''../../assets/js/eventBus"

    export default {

    data(){

    return {

    msg :"我是一个测试的value"

    }

    },

    created(){},

    methods:{

    sendMsg(){

    bus.$emit("handle",this.msg) // ---> handle:事件名; this.msg : 要传递的值

    }

    }

    }

    // outherPerson.vue

    我是另一个组件我负责接收其他兄弟传过来的值

    接收值+{{msg}}

    import bus from 'eventBus文件所在的路径' // --> 如: ''../../assets/js/eventBus"

    export default {

    data(){

    return {

    msg :"我是默认值"

    }

    },

    created(){},

    methods:{

    receiveMsg(){

    bus.$on("handle",function(message){ // --->handle : 事件名 (同传值的事件名一致) ;message : 接收的值

    this.msg = message ; // ---->我是一个测试的value

    })

    }

    }

    }

    //main.vue

    *兄弟组件中进行互相传值:$emit('handle',value) 进行传值$on('handle',function(msg){//--> msg 是接收其他组件传递过来的值 })*

    export default {

    data(){

    return {}

    },

    components:{

    Person:()=> import ('./person.vue') ; //-----> person.vue 的路径

    Outherperson:()=> import ('./outherPerson.vue') ;

    }

    created(){},

    methods:{},

    }

    效果图:

    传值之前.png

    传值成功显示.png

    还有一种情况是vuex (vue 的插件vuex 数据管理)

    4.0子组件中一个点击事件通过不同的值向父组件触发不同的事件并传递val

    //子组件中

    点击1

    点击2

    export default {

    data(){

    return{}

    },

    methods:{

    getClick(value){

    // 根据子组件中不同的value 值触发不同的事件

    if(value==1){

    this.$emit("change1",value)

    }else {

    this.$emit("change2",value)

    }

    }

    }

    }

    //父组件

    export default {

    data(){

    return{}

    },

    components:{

    Child:()=> import ('./testChild.vue')

    },

    methods:{

    getvalue1(val){

    //接收子组件通过事件传递过来的值

    val+=1

    console.log("parmas11:::",val) //2

    },

    getvalue2(parmas){

    //接收子组件通过事件传递过来的值

    parmas+=2

    console.log("parmas22:::",parmas) //4

    },

    }

    }

    image.png

    展开全文
  • 子组件向父组件传递参数时主要有以下两种方法 //子组件 this.$emit('itemClick',item) 方法一:不加括号 //父组件 <div id="app"> <Child @itemClick="handleItemClick"/> </div> ...
  • 这是我学习整理的关于 Vue.js 系列文章的第一篇,另外还有两篇分别是关于优化和原理的。希望读完这3篇文章,你能对 Vue更深入的认识。...通过 props 可以把父组件的消息传递给子组件://parent.vue<ch...
  • 这是我学习整理的关于 Vue.js 系列文章的第一篇,另外还有两篇分别是关于优化和原理的。希望读完这3篇文章,你能对 Vue更深入的认识。...通过 props 可以把父组件的消息传递给子组件://parent.vue<ch...
  • props和$emit父组件向子组件传递数据是通过props传递的,子组件传递数据给父组件是通过$emit触发事件来做到的。 编辑器:demo:在上面的例子中,有父组件parent和子组件child。1).父组件传递了message数据给子组件...
  • 这是我学习整理的关于 Vue.js 系列文章的第一篇,另外还有两篇分别是关于优化和原理的。希望读完这3篇文章,你能对 Vue更深入的认识...通过 props 可以把父组件的消息传递给子组件:// parent.vue <child ...
  • 问题:1 子组件通过this.$emit('ok', newValue)方法向父组件传递新的值2 父组件需要通过index知道是改变的list中哪一的值3.该子组件用在了很地方,内部逻辑改变的话会比较麻烦所以,setData 方法newValue和index...
  • 事件绑定,一个事件名称上面可能绑定多个函数 2. $emit(“事件名称”,需要传递的值) 事件触发时,会触发当前事件身上所有的函数 3. $off(“事件名称”,[需要解绑的函数]) 事件解绑时,若指定解绑函数则只解绑相应...
  • ①定义父组件,父组件传递 number这数值给子组件,如果传递的参数很,推荐使用json数组{ }的形式 ②定义子组件,子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型,如果不符合会...
  • 如果需要传多个参数,可以通过以下方式: v-on:click="$emit('funcName',{a,b...})" 父组件中通过自定义事件来监听子组件的事件 比如自定义事件名称childlistener 我们通过以下方式在父组件中进行监听: v-on:child...
  • Vue事件处理 在子组件和父组件中 父组件可以通过props向下传递数据,子组件则可以用 emit向上传递。但在两没有嵌套关系的组件中或者想指定触发某个操作时则可以用 Bus 事件中心。 现在我有这样一组件 List ...
  • Vue事件总线

    2020-01-30 16:48:44
    那么隔着多个组件,如果一步到位,触发对方的事件并且传递参数呢? Vue.prototype.$bus= new Vue(); //main.js中,在vue原型上挂载 this.$ bus.$on('dataFromA', function (data) { }); // 一般在m...
  • 事件绑定,一个事件名称上面可能绑定多个函数 2. $emit("事件名称",需要传递的值) 事件触发时,会触发当前事件身上所有的函数 3.$off("事件名称",[需要解绑的函数]) 事件解绑时,若指定解绑函数则只解绑...
  • 现在我么需要在A中对C的props赋值,监听C的emit事件 A组件与C组件通信,我们有多少种解决方案? 我们使用vuex来进行数据管理,依赖于vuex我们可以一次改变,任何一个组件中都能获取。但是如果多个组件共享状态比较...
  • Vue项目中经常使用到组件之间的数值传递,实现的方法很多,但是原理基本上...我们可以从子组件中想父组件中传递多个数据,在子组件中要做的工作只是,使用this.$emit()命令来自定义一个事件。该命令可以传递多...
  • 比如在一页面中,我们从服务器请求到了很的数据。 其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。 这时候,并不会让子组件再次发送一网络请求,而是直接让大组件(父...
  • 绑定事件,一个事件名称上面可能绑定多个函数 $on("事件名称",回调函数) 事件名称与函数之间的关系:key:[] $emit:触发事件 触发事件时,需要触发当前事件身上所有的函数 $emit("事件名称",[需要传递...
  • vue项目在兄弟组件中使用了bus事件总线通信,当前使用场景是:在A页面通过bus.$emit传递给B组件一信号,此信号的作用是告知B组件打开dialog弹窗,而B组件接收到信号后出现了次弹窗问题,此问题根源在于bus.$on在...
  • Vue项目中经常使用到组件之间...我们可以从子组件中想父组件中传递多个数据,在子组件中要做的工作只是,使用this.$emit()命令来自定义一个事件。该命令可以传递多个参数: 第一个参数是自定义事件的名字,是必须的...
  • 这里主要说另一种方法event-bus (事件总线),就是借助 Vue实例中的$on()与$emit()方法,来实现数据传递 用法: 创建全局的空 Vue 实例: new Vue() 在需要接收数据的组件中,利用 $on() 绑定自定义事件,关联事件...
  • 父子组件通信 父组件向子组件传递数据: 1、通过子组件的 props 选项声明它期待获得的数据,用以接收...1、在子组件中以某种方式使用$emit来触发一个自定义事件,并传递参数(1个或者多个参数),参数将作为实参传...
  • 前言 Vue项目开发中,我们会遇到一些公共的组件需要单独提取出来。...我们可以从子组件中想父组件中传递多个数据,在子组件中要做的工作只是,使用this.$emit()命令来自定义一个事件。该命令可以传递多...
  • bus总线是vue中路由跳转传递数据的常用方法,适用于传递数据不的情况,但是在使用的过程中发现,bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据。检查bus的配置以及调用方法,均没有出错,错就错...
  • $emit时,必须已经$on,否则将无法监听到事件,也...$on在组件销毁后不会自动解除绑定,若同一组件次生成则会次绑定事件,则会一次$emit次响应,需额外处理。 数据非“长效”数据,无法保存,只在$emit后生效。

空空如也

空空如也

1 2 3 4
收藏数 75
精华内容 30
关键字:

emit事件传递多个vue

vue 订阅