比如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. 《Spring技术内幕》读书笔记

    简介: 1.spring 与unix.window这些操作在计算机系统中起到的作用是类似的 2.两大核心模块:IOC\AOP 3.为应用开发提供了许多现成的系统组件:事务处理.Web MV.JDBC. ...

  2. Project Euler 345: Matrix Sum

    题目 思路: 将问题转化成最小费用流 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) #incl ...

  3. printf打印输出

    int PrintVal = 9;    /*按整型输出,默认右对齐*/    printf("%d\n",PrintVal);    /*按整型输出,补齐4位的宽度,补齐位为空格 ...

  4. 【转载】DRuid 大数据分析之查询

    转载自http://yangyangmyself.iteye.com/blog/2321759 1.Druid 查询概述     上一节完成数据导入后,接下来讲讲Druid如何查询及统计分析导入的数据 ...

  5. PYTHON -- 基础3

    1.数据类型 1.int 类型 用于计算 1.1 bit_length() 转换为2进制的最小位置 有效的 i = 5 print(i.bit_length()) i 二进制 i.bit_length ...

  6. PAT 1120 Friend Numbers

    1120 Friend Numbers (20 分)   Two integers are called "friend numbers" if they share the sa ...

  7. PowerDesigner数据库设计导出到Excel

    在PowerDesigner 中 ctrl+shift+x 弹出执行脚本界面,输入如下代码就会生成 Excel   Option Explicit Dim rowsNum rowsNum = '--- ...

  8. aggregate基础 使用记录

    mongoDB中聚合(aggregate)的具体使用 我们可以用$指定字段来表示选定的document的field,另外可以使用$$ROOT来表示选定的document的所有内容(例如:chosenD ...

  9. python--日志模块

    一.logging模块就是python里面用来操作日志的模块,logging模块中主要有4个类,分别负责不同的工作 1. Logger 记录器,暴露了应用程序代码能直接使用的接口:简单点说就是一个创建 ...

  10. oracle 12g,断电,数据库启动不了,无法登录 并且 报ora-00119和ora-00132错误

    oracle 12g,断电,数据库启动不了,无法登录 前提:服务全部打开,监听也配置好了! 可以参考网站:https://jingyan.baidu.com/article/5552ef47c73ee ...