比如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. 承接微信小程序外包 H5外包就找北京动点软件开发团队

    承接小程序外包 微信小程序外包 H5外包 就找北京动点软件 长年承接微信小程序.微信公众号开发 全职的H5开发团队,开发过几十款微信小程序公众号案例 欢迎来电咨询,索取案例! QQ:372900288 ...

  2. day22

    # day22 ## 复习 ```python# 1.内存管理# 引用计数:垃圾回收机制工作原理# -- 引用就 +1 ,释放就 -1 , 当计数为0时,就会被垃圾回收机制回收 # 标记清除:解决循环 ...

  3. (转)通过maven,给没有pom文件的jar包生成pom文件,maven项目引入本地jar包

    文章完全转载自 : https://blog.csdn.net/qq_31289187/article/details/81117478 问题一: 经常遇到公司私服或者中央仓库没有的jar包,然后通过 ...

  4. leetcode刷题——一些算法技巧总结1.0

    运算符优先级,简单记就是:! > 算术运算符 > 关系运算符 > && > || > 赋值运算符 把数字取反,可以作为一种标记 pythonlast = ...

  5. Django细节小记

    前记:Django的ORM.模块有很多函数细节,要学会多看文档学习函数的细节 聚合annotate()和aggregate()的使用 简言之,annotate()得到的是查询集,类似all(),只不过 ...

  6. maven install报错 Failed to execute goal on project my-manager-mapper: Could not resolve dependencies for project com.my:my-manager-mapper:jar:0.0.1-SNAPSHOT:

    报错信息为: [ERROR] Failed to execute goal on project my-manager-mapper: Could not resolve dependencies f ...

  7. JMETER-01

    jmter安装 1.Linxu安装: 步骤:下载JMeter包-->解压包-->赋权限-->配置环境变量-->测试服务 1.下载:wget http://mirrors.hus ...

  8. 使用 jquery.wordexport.js导出的Word排版

    js导出word文档所需要的两个插件: FileSaver.js jquery.wordexport.js 使用jquery.wordexport.js这个插件导出的word文档的排版方式: 编辑器打 ...

  9. Petrozavodsk Winter Camp, Day 8, 2014, Fine Brochures

    1的个数-块的个数+多减的个数+flag 多减的只会在一个循环末尾出现 #include <bits/stdc++.h> using namespace std; #define rep( ...

  10. CentOS 7 + MySql 中文乱码解决方案

    原文:https://blog.csdn.net/qq_32953079/article/details/54629245,亲测有效,故记录之. 一.登录MySQL查看用SHOW VARIABLES ...