比如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. CPU高的排查

    之前有朋友反馈说发的内容希望有个梯度,逐步加深,前面发了几篇关于jvm源码分析的文章,可能我觉得我已经把内容写得浅显易懂了,但是对于某些没怎么接触的同学来说还是比较难理解,这个我以后慢慢改进吧,今天发 ...

  2. Windows 环境下进行的jenkins持续集成

    一台服务器作为代码仓库,一条服务器做持续集成代码仓库目前常见的github.gitlab.gitee持续集成常用Jenkins 服务器的配置这边都以Windows为例进行介绍 1. 安装Jenkins ...

  3. [原]osg模型动画|骨骼动画

    参考源码:osg的官方例子:osganimationviewer 首先制作一个带骨骼动画的模型  demo.FBX 这里面我们做了两个骨骼动画:1.open   2.close 下面开始在osg中使用 ...

  4. java笔记 -- java字符串

    概念: Java字符串就是Unicode字符序列, Java没有内置的字符串类型, 而是在标准Java类库中提供了一个预定义类. 每个用双引号括起来的字符串都是String类的一个实例.String ...

  5. LoRa无线技术介绍

    什么是LoRa LoRa是semtech公司创建的低功耗局域网无线标准,低功耗一般很难覆盖远距离,远距离一般功耗高,要想马儿不吃草还要跑得远,好像难以办到.LoRa的名字就是远距离无线电(Long R ...

  6. 《R语言入门与实践》第七章:程序

    前言 这一章讲了程序设计的相关知识,经过了: 算法分析 编码 得到最后的程序. if 语句 格式:if (this) {that} else if { another} else { another ...

  7. ElasticSearch 6.2 Mapping参数说明及text类型字段聚合查询配置

    背景: 由于本人使用的是6.0以上的版本es,在使用发现很多中文博客对于mapping参数的说明已过时.ES6.0以后有很多参数变化. 现我根据官网总结mapping最新的参数,希望能对大家有用处. ...

  8. Linux基础命令ls

    目录处理命令:ls -a 显示所有文件,包括隐藏文件 --all -l h  详细信息显示  --long --human -d 查看目录属性  - -i 查看文件唯一编号 -表示文件 d表示目录 l ...

  9. python线程condition条件锁应用实例

    import time import threading # 吃火锅鱼丸 guo = [] suo = threading.Condition() #条件锁 # 生产者负责生产 class Produ ...

  10. WPF中定时器与进度条的配合使用

    WPF中定时器使用的注意事项: WPF需要使用System.Windows.Threading.DispatcherTimer定时器,而不能使用System.Timers.Timer定时器.因为Sys ...