Vue的props父传子的示例代码


Posted in Javascript onMay 20, 2020

废话不多少,父传子做一个比喻

首页想加一个图片,但又不想每次都用img而且又让img做css和动画事件。此时最简单的方法做一个页面封装,然后起一个名字让首页自己获取,放一个地址就行!其他什么都不用管。

步骤如下:

第一步:创建一个组件,相当于创意文件夹,专门存小东西以后经常用

<template>
  <div>
    <img src="./xxx.xx" alt="">
  </div>
</template>

<script>
  export default{
    data(){
      return{}
    }
  }
</script>

第二步:在首页这边引入该页面

<script>
  import Images from "../../../components/imgs.vue"
  export default{
    data(){
      return{}
    },
    components:{
      "xImage":Images
    }
  }
</script>

第三步:把xImage放在HTML里

<template>
    <xImage :xxoo="imgs1"></xImage>
</template>

第四步:开始父传子,有人不知道谁是父谁是子。能在HTML瞎起名的就是父,import入进来的肯定就是子了

:xxoo : 瞎起名的信号灯,用来告诉子页面,土豆土豆我是地瓜

imgs1 : 这就是信号灯准备发射出去的东西

<template>
    <xImage :xxoo="imgs1"></xImage>
</template>

export default{
    data(){
      return{
        imgs1:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589655320760&di=6b907426d0fdb6b3d8b30ae5dd3761be&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F94cad1c8a786c91706be5bdccf3d70cf3ac75791.jpg"
      }
    },
    components:{
      "xImage":Images
    }
}

第五步:

在子页面接收刚才信号灯发过来的东西,有人以为直接把imgs1放进去就行了,大错特错哦!!!!
他接受的不是数据,而是我说的信号灯
所以用props接收这个信号灯,然后把信号灯做一个要求,我只要这样品质的土豆!其他的我不要

<template>
    <img :src="xxoo" alt="">
</template>

<script>
  export default{
    data(){ ... },
    props:{
      xxoo:String
    }
  }
</script>

以下就是土豆有几种类型

  • String : 普通的 'xxxxx'
  • Number : 只要 123456789
  • Boolean: 只要true 或者 false
  • Array:单个的变量储多个值 [1,2,3]
  • Object:对象{a:1,b:2}

到此这篇关于Vue的props父传子的示例代码的文章就介绍到这了,更多相关Vue props父传子内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
js实现弹幕墙效果
Dec 10 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 #Javascript
vue和小程序项目中使用iconfont的方法
May 19 #Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 #Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 #jQuery
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 #Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 #Javascript
jQuery 动画与停止动画效果实例详解
May 19 #jQuery
You might like
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
子页向父页传值示例
2013/11/27 Javascript
JSON格式化输出
2014/11/10 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python 私有函数的实例详解
2017/09/11 Python
python3.5绘制随机漫步图
2018/08/27 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
大学生学年自我鉴定
2014/02/10 职场文书
2014年国庆标语
2014/06/30 职场文书
男方婚礼答谢词
2015/01/20 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
Redis数据同步之redis shake的实现方法
2022/04/21 Redis