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. 使用maven 打包springboot项目步骤以及所遇到的问题

    1.首先必须确保java和maven是安装好的,并且环境变量配置正确 2.接着可以看一下我们项目中的pom.xml中的以下配置 packaging那里很关键,表示我们打包项目的类型,可以为jar 也可 ...

  2. jquery--获取input checkbox是否被选中以及渲染checkbox选中状态

    jquery获取checkbox是否被选中 html <div><input type="checkbox" id="is_delete" n ...

  3. IntelliJ IDEA 2017.3尚硅谷-----如何创建模块

  4. TCP／IP详解，卷1：协议--1

    引言 很多不同的厂家生产各种型号的计算机,它们运行完全不同的操作系统,但 T C P / I P 协议 族允许它们互相进行通信.这一点很让人感到吃惊,因为它的作用已远远超出了起初的设想. T C P ...

  5. vue项目依赖的安装

    npm install element-ui --save npm install vuex  --save npm install axios  --save npm install moment ...

  6. 箭头函数 this指向问题

    1.为什么要用箭头函数 简洁 易用 固定this 指向(箭头函数在this定义时候生效) 2.箭头函数分析this指向 1.this指向调用函数的对象 情况1 var obj={ a:"1& ...

  7. gcc 简单使用笔记

    编译生成可执行文件(bin文件): gcc test.c //默认生成可执行文件名为a.out 指定可执行文件名: gcc -o test test.c 编译生成目标文件(.o文件): gcc -c ...

  8. Spring整合JDBC和Druid连接池

    我的博客名为黑客之谜,喜欢我的,或者喜欢未来的大神,点一波关注吧!顺便说一下,双十二快到了,祝大家双十二快乐,尽情的买买买~ 如果转载我的文章请标明出处和著名,谢谢配合. 我的博客地址为: https ...

  9. JavaScript - what is "this"? this是什么？

    https://fangyinghang.com/this-in-js/ Core func(p1, p2) // 等同于 func.call(undefined, p1, p2) this 就是ca ...

  10. opencv python：图像金字塔

    图像金字塔原理 expand = 扩大+卷积 拉普拉斯金字塔 PyrDown:降采样 PyrUp:还原 example import cv2 as cv import numpy as np # 图像 ...