passer.vue中代码
首先在文件中引入组件 import canvasDraw from '@/components/CanvasDraw/canvasDraw'
局部注册组件:components: { canvasDraw },
HTML中使用组件 <canvas-Draw :imgSrc="formLabelAlign.src" @custom="custom" > </canvas-Draw>
imgSrc:向组件传递值
custom:自定义组件回传数据的方法data为canvasDraw回传的数据例如:
custom(data){
   if(data.type==1){
      ...
    }else{
      ...
    }
},

canvasDraw中代码
在export default中定义imgSrc来接收传递过来的值例: props:['imgSrc']。
这样就可以直接在HTMl终使用imgSrc例如: <img :src="imgSrc" >,
当canvasDraw组件有数据需要返回到passer.vue中时可以这样this.$emit('custom',{'type':1,'data':''}); 大括号内为传递的data参数

VUE父子组件相互传值的更多相关文章

  1. Vue父子组件相互传值及调用方法的方案

    Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...

  2. vue 父子组件相互传值

    子传父 逻辑: 单击子组件的按钮 ,触发它的单击事件   通过 $emit 触发父级自定义事件 并传一个值给父级 <div id="id"> <h3>儿子 ...

  3. vue父子组件相互传值的实例

    当子组件需要向父组件传递数据时,就要用到自定义事件 子组件用 $emit()来触发事件,父组件用$on()来监昕子组件的事件 父组件也可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自 ...

  4. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  5. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  6. vue 父子组件互相传值容易出现的报错

    对于父子组件之间的互相传值,报错如下: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten w ...

  7. vue 父子组件相互传递数据

    例子一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  8. vue——父子组件间传值

    (1)父组件给子组件传值(商品详情页): 根据订单类型,判断显示立即购买/立即拼单: 通过props来传递参数 父组件(商品详情页) 父组件调用子组件,在子组件的标签中,通过:数据名称=”数据”的形式 ...

  9. 关于Vue中父子组件相互传值

    Header为子组件,Home为父组件,通过子组件调用父组件 运行结果如下 下面是父组件调用子组件的案例 通过button按钮的click事件 图一是父组件Home中的run方法,图二是msg和fun ...

随机推荐

  1. [Note]Splay学习笔记

    开个坑记录一下学习Splay的历程. Code 感谢rqy巨佬的代码,让我意识到了Splay可以有多短,以及我之前的Splay有多么的丑... int fa[N], ch[N][2], rev[N], ...

  2. X-Forwarded-For注入漏洞过程记录

    一.题目地址 https://www.mozhe.cn/bug/detail/QWxmdFFhVURDay90L0wxdmJXSkl5Zz09bW96aGUmozhe 二.使用工具 FireFox浏览 ...

  3. 【做题笔记】洛谷P1464 Function

    我先谔谔一波 /kk 我谔谔 看题第一眼:欸这不就是按题意递归嘛,,直接搞不就好了 3 min 后,重新看题 然后自己手玩了几个样例,噢,递归太多了,铁定会 T 啊...... 然后,作为一个从没写过 ...

  4. FPGA-HPS

    最近在做DE1的图像方面实验,用到了HPS,所以简要谈一谈什么是HPS. 由图可知,DE1的板子就是有fpga+hps组成的: 参考自:http://bbs.eeworld.com.cn/thread ...

  5. MNIST数据集环境搭建

    由于换了电脑,ubuntu是重新下载的,因此记录一些相关数据集的搭建: 首先是data数据集,在第七讲中 我们需要建立data文件夹,并将数据集放进去 再就是model模型 我们应该新建一个model ...

  6. 数据库程序接口——JDBC——API解读第一篇——建立连接的核心对象

    结构图 核心对象 Driver Java通过Driver接口表示驱动,每种类型的数据库通过实现Driver接口提供自己的Driver实现类. Driver由属性,操作,事件三部分组成. 属性 公共属性 ...

  7. Python学习之面向对象进阶

    面向对象进阶当然是要谈谈面向对象的三大特性:封装.继承.多态 @property装饰器 python虽然不建议把属性和方法都设为私有的,但是完全暴露给外界也不好,这样,我们给属性赋值的有效性九无法保证 ...

  8. 使用Python处理非对称加密-测试大佬常用的处理方式

    一.思考❓❔ 1.什么是非对称加密? 公钥加密系统,广泛用于数据加密传输 更详细的解释可参考维基百科( https://en.wikipedia.org/wiki/RSA_(cryptosystem) ...

  9. strtok() and strtod()

    1.strtok(参数1,参数2)按指定的分割符将字符串分割开来 参数1:表示要被分割的字符串的地址: 参数2:表示指定的分割符的地址: 例如:按空格分割“Hello World” buffer[] ...

  10. Django - 后台admin不显示带auto_now, auto_now_add选项的字段

    https://stackoverflow.com/questions/6386172/datetimefield-doesnt-show-in-admin-system 解决办法 class Rat ...