vue 中子组件或者公共组件向上一级传递数据 $emit的使用

在子组件或者公共组件中,定义一个方法例如

<li @click="selectItem(item)" v-for="item in group.items" class="list-group-item">

  然后在methods中使用

selectItem(item){
        this.$emit(‘select‘,item);
}

$emit中的两个参数的含义是,一个是传递给父组件的方法,一个是传递给父组件方法的参数。

也就是说,父组件通过使用子组件通过$emit传递的方法select及其参数,来得到传递的数据。

并且,父组件直接使用的select方法其实就是自定义方法的用法,触发这种自定义方法就是子组件触发传递$emit的方法,也就是click。

 <ListView @select=‘selectSinger‘ :data="singers"></ListView>

此处select既是子组件通过$emit传递的自定义方法

selectSinger则是父组件接收select所带的参数的方法

selectSinger(singer) {
        this.$router.push({
          path:`/singer/${singer.id}`
        })
 }

参数singer既是子组件$emit所传递的item参数。

若是有用并觉得不错,可以赞一个哟

时间: 2024-09-29 22:46:23

vue 中子组件或者公共组件向上一级传递数据 $emit的使用的相关文章

[thinkphp] 公共头部底部如何传递数据

分组底下有一个公共模板文件夹 Modules/Index/Tpl/public/ 如何传递数据给模板呢? 在  入口文件/Lib/Action/  中创建类CommonAction.class.php,添加自动执行方法 _initialize() 在方法中$this->username = 'aobama', 然后分组中的action继承CommonAction.class.php 这样就可以直接在模板中使用了 hello,{$username}

django之权限管理公共组件

公共组件使用 公共组件的基本搭建 在上一篇已经是学习如何搭建一个公共组件,可以拷贝到任何项目里面,实现权限的管理工作,今天再次学习下公共组件的使用 新建一个项目,并把公共组件拷贝到新项目中取,并且在setting中注册组件 中间件的注册 公共组件的配置管理 在中间件中,通过导入项目的setting文件,从里面导入变量信息,所以我们在setting里面设置了如下变量信息: # ############################## RBAC权限相关配置开始 #################

vue + elementui 中的弹窗组件封装成公共组件

如果一个弹窗比较简单,可以直接放在页面中,通过visible属性的true,false控制显示隐藏就可以了,我们今天要说的是将个比较复杂的弹窗组件封装成全局组件,然后可以在项目中的任何一个页面引用~~下面走起 1.首先要注册个全局组件,用下面的全局API  Vue.component('my-component', { /* ... */ }) 在js文件中首先引入这个弹窗组件,组件名称是iesPersonRadioDialog,项目中会引入一个js文件,这个js文件中在分别引入其他的js,模块

vue引入全局组件和局部组件的区别以及全局注册公共函数

一,先看看全局组件的引用,就拿最常用的全局的暂无数据来举例,看看全局的是如何实现的. Step1,首先在components创建一个公共的目录,NoDatas目录里边包含index.vue和index.js,index.vue用来写公共的页面,index.js用来导出这个组件. <template> <!-- NoDataWords 可以灵活控制每个页面显示的内容 --> <!-- NoDataHeight 可以灵活控制每个页面的高度 --> <!-- 如果你的页

基于vue以及vuex的dialog弹出框公共组件

说明:    一款dialog公共组件, 组件功能: 1. 可拖拽.放大缩小 2. 通过传入属性决定是否使用遮罩层    3. 可根据屏幕自动适应宽高,也可自动传入宽高 4. 自动适应位置相对屏幕居中 5. close关闭按钮等回调函数 详细见github地址:https://github.com/SwnCowDevil/my-dialog 原文地址:https://www.cnblogs.com/sunweinan/p/8695341.html

在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考

不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行.也就是说,子组件不应该去修改props.但实际开发过程中,可能会有一些情况试图去修改props数据: 1.这个props只是传递一个初始值,子组件把它当做一个局部变量来使用,这种情况一般定义一个本地的data属性,将props的值赋值给它.如下: props: ['initialCounter'],

vue.js(19)--vue中子组件调用父组件的方法

子组件是不能直接使用父组件中的方法的,需要进行事件绑定(v-on:自定义方法名="父组件方法名"),然后在子组件中再定义一个方法,使用this.$emit('自定义方法名')语句完成父组件中方法到子组件中的调用,最后直接调用子组件中定义的方法即可. <div class="app"> <mycom v-on:func="parentshow"></mycom> <!-- 通过v-on:绑定方法将父组件中的

vue页面中某个单一界面不使用公共组件的方式

一.这是你要使用的公共组件 . 二.然后,这个path变量要事先声明好 三.给它设置一个监听 四.只要是在上面的path===的路径就不会引用公共组件啦! 有用点个赞,感谢您呦!!! 原文地址:https://www.cnblogs.com/hz-handofgod/p/11982095.html

vue中子父组件传值问题

1.子组件向父组件传值(事件调用机制:本质就是父向子传递方法,子调用方法,子将数据当作参数传给这个方法:即传值给父组件): 1.在父组件中创建一个方法: <p>购买数量:<number-box :id="id" @getcount="getSelectCount" :max="msglist.stock_quantity"></number-box></p> (1)getSelectCount(){