比如el-upload中的 :on-success= fn,其实是给组件el-upload传递一个prop,这样写的话fn只能接受upload组件规定的参数,如果想自己传递父组件中的参数比如b,要写成:on-success= ()=>{fn2(b)}

原理要从Vue的render函数的生成讲起

第一种情况:v-bind,绑定普通方法

<child :trans_method="test">点击</child>

它的父元素的render函数是这样的:

ƒ anonymous(
) {
with(this){return _c('div',{attrs:{"id":"app"}},[_c('child',{attrs:{"trans_method":test}},[_v("点击")])],1)}
}

这里的this是父组件vm,可以看到子组件将来接受到的trans_method将会是test这个方法,v-bind是给子元素的属性,如果子元素是普通节点而不是组件节点,v-bind一个方法是没啥用的,如果子元素是组件节点,这个属性传递给子组件后,怎么调用要看子组件的逻辑,这里是形成不了闭包(这个说法有问题,准确的表达应该是“新生成一个匿名函数,它的会保留作用域链上的this的属性传递出去”,但是意思知道就行)的。

第二种情况:v-bind,绑定匿名方法:

<child :trans_method="()=>{fn1(name)}">点击</child>,

render函数是这样的

ƒ anonymous(
) {
with(this){return _c('div',{attrs:{"id":"app"}},[_c('child',{attrs:{"trans_method":()=>{fn1(name)}}},[_v("点击")])],1)}
}

可见能形成闭包,匿名函数的参数是子组件调用的时候传入,fn1可以传入父组件的参数。

第三种情况,再进一步 如果写成数组:

<child v-for="item in array" :trans_method="()=>{fn1(item)}">点击</child>

render函数是这样的:

ƒ anonymous(
) {
with(this){return _c('div',{attrs:{"id":"app"}},_l((array),function(item){return _c('child',{attrs:{"trans_method":()=>{fn1(item)}}},[_v("点击")])}),1)}
}

_l函数是renderList,逻辑是第二个参数(方法)调用array的元素-item,返回_c方法执行后生成的Vnode数组,可见也有闭包,只不过稍微复杂了一点点

注意:v-bind=“fn1()”而不是="fn1" 那绑定的将是fn1执行的返回值。

下面看v-on

v-on在普通节点上比如@click="fn1"方法,那么click指向的是($event)=>{fn1($event)},调用的时候传入$event到fn1的参数中,如果绑定的是fn1(),绑定的是($event)=> {return fn1()},不传入$event到fn1中,需要的话自己在fn1参数中写,注意这里绑定的不是方法的返回值,而是新构造了一个匿名函数。

注意这里有闭包,所以v-on的方法,直接写方法调用。

v-on写在组件节点上,要加.native,因为组件是没有on事件的,on指向的是传递给组件的属性,需要加上.native告诉组件做不同处理,把on事件绑定到vmComponent挂载的节点上。

element-ui(或者说Vue的子组件)绑定的方法中传入自定义参数的更多相关文章

  1. Vue 给子组件绑定v-model

    父组件使用子组件时,使用v-model指令,在子组件中使用value获取props的值 父组件 <template> <div style="margin:20px;dis ...

  2. vue.js_09_vue-父子组件的传值方法

    1.父向子传递数据 1>定义一个父组件和一个子组件 2>父组件通过v-bind绑定传递的数据  :parentmsg="msg" 3>子组件需要通过 props: ...

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

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

  4. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  5. vue $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数

    Vue.js 父子组件通信的十种方式 前言 很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.找到了两种方法可以同时添加自定义参数的方 ...

  6. vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 浅入深出Vue:子组件与数据传递

    上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...

  8. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  9. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

随机推荐

  1. inode满处理

    https://blog.csdn.net/liuxiao723846/article/details/79423581 [root@monitor251 bin]# for i in /boot; ...

  2. NetSec2019 20165327 Exp6 信息搜集与漏洞扫描

    NetSec2019 20165327 Exp6 信息搜集与漏洞扫描 一.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 二.实践内容 1.各种搜索技巧的应用 2.DNS IP注册信息的查询 ...

  3. erlang的热更新

    erlang作为一个为电信级别而出现的语言,热更新是其最重要的特性之一  热代码升级-Erlang允许程序代码在运行系统中被修改.旧代码能被逐步淘汰而后被新代码替换.在此过渡期间,新旧代码是共存的. ...

  4. OO面向对象第一单元总结

    OO面向对象第一单元总结(表达式求导) 写在前面: 魔鬼课程oo第一单元终于结束,当终究要落笔总结,竟不知从何写起…… 回首再去看第一次的作业,你会满足于那时的幸福,或许,这就是成长吧! 千言万语,一 ...

  5. 毕设记录(ajax)

    有关ajax的cache属性值 cache作用:是否在缓存中读取数据的读取. cache属性是true(默认值)时:在第一次请求完成之后,如果地址和参数不变化,第二次去请求,会默认获取缓存中的数据,不 ...

  6. Linux进程管理的学习

    uptime 简洁显示服务器负载 uptime 显示内核版本 uname -r dstat命令 cpu.内存.io等查看工具 dstat dstat --top-cpu dstat --top-io ...

  7. 人生苦短,我用python(目录)

    一.python基础篇 python中闭包及延时绑定问题 python中的装饰器.生成器 二.前端 bootstrap框架 BOM&DOM JavaScript中的词法分析 三.数据库 mys ...

  8. 思科模拟器PacketTracer7-----2台PC通过交叉线互连

    实验二—3 实验工具:思科模拟器PacketTracer7(可在思科官网下载,免费) 实验设备: PC两台,交叉线 实验步骤: 一.配置网络拓扑图 二.配置PC0和PC1的IP地址,掩码和网关 四.通 ...

  9. Linux文件系统目录

    Linux操作系统目录呈树形结构,文件系统只有一个根目录,其余文件都是从根目录下延伸出来的 上图是一个Linux文件系统目录的展现,现在我们来看一下文件系统目录下相关目录及其功能 根目录( / ) L ...

  10. java ssl 连接AD域

    1.安装证书服务和IIS服务,不需要启动asp.(其会在c盘生成一个crt文件)2.获取crt证书文件 windows 2003:文件位于系统盘根目录 windows 2008: 文件位于C:\Win ...