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 相关文章推荐
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
vue时间格式化实例代码
Jun 13 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 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安装攻略:常见问题解答(三)
2006/10/09 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
PHP array_push 数组函数
2009/12/26 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
php如何连接sql server
2015/10/16 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
一次性工伤赔偿协议书范本
2014/11/25 职场文书
岗位职责范本大全
2015/02/26 职场文书
亮剑精神观后感
2015/06/05 职场文书