Vue的props父传子的示例代码

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

首页想加一个图片，但又不想每次都用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父传子内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue常用传值方式、父传子、子传父及非父子实例分析

    Vue常用传值方式、父传子、子传父及非父子实例分析

    本文实例讲述了Vue常用传值方式.父传子.子传父及非父子.分享给大家供大家参考,具体如下: 父组件向子组件传值是利用props 子组件中的注意事项:props:['greetMsg'],注意props后面是[]数组可以接收多个值,不是{}. 且此处的greetMsg用greet-msg会报错,记住需用驼峰法命名 非父子组件进行传值 非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中 间仓库来传值,不然路由组件之间达不到传值的效果. import Vue from 'vue' e

  • Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

    Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况.当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍.我先给大家介绍Vue开发中常用的三种传值方式. Vue常用的三种传值方式有: •父传子 •子传父 •非父子传值 引

  • Vue三种常用传值示例(父传子、子传父、非父子)

    1.父组件向子组件进行传值: 父组件: <template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputName="name"></child> </div> </template> <script

  • Vue的props父传子的示例代码

    废话不多少,父传子做一个比喻 首页想加一个图片,但又不想每次都用img而且又让img做css和动画事件.此时最简单的方法做一个页面封装,然后起一个名字让首页自己获取,放一个地址就行!其他什么都不用管. 步骤如下: 第一步:创建一个组件,相当于创意文件夹,专门存小东西以后经常用 <template> <div> <img src="./xxx.xx" alt=""> </div> </template> &l

  • Vue组件通信方式(父传子、子传父、兄弟通信)

    目录 父组件传到子组件 子组件向父组件传值 非父子传参 (事件总线) vue 跨页面双向通信 同源通信 非同源通讯 父组件传到子组件 父组件是通过props属性给子组件通信的 数据是单向流动 父—>子 (子组件中修改props数据,是无效的,会有一个红色警告) 1. 父组件parent.vue代码如下:  <template>    <div class="parent">      <h2>{{ msg }}</h2>      

  • Vue组件通信之父传子与子传父详细讲解

    目录 父组件传递给子组件 浅谈Props 子组件传递给父组件 父组件传递给子组件 父组件传递给子组件:通过props属性: 子组件传递给父组件:通过$emit触发事件: 这里我们知道,父组件有一些数据需要子组件来进行展示,那我们可以通过props来完成组件之间的通信 通过props来完成组件之间的通信 浅谈Props 那么什么是Props呢? 作用:接受父组件传递过来的属性 Props是你可以在组件上注册一些自定义的attribute(属性): 父组件给这些attribute(属性)赋值,子组件

  • Vue父子组件数据双向绑定（父传子、子传父）及ref、$refs、is、：is的使用与区别

    Vue父子组件数据双向绑定（父传子、子传父）及ref、$refs、is、：is的使用与区别

    既然有父传子那么肯定有子传父,有子传父肯定也有两者之间相互绑定 这里我们先看一下子传父的写法: 一.子传父:$emit() 看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子传父</title> <script src="https://cdn.jsdelivr.net/npm/vue"></sc

  • vue3的父传子问题(单项数据流)

    目录 vue3父传子(单项数据流) vue3 父子传参 简单易懂 父传子 子传父 vue3父传子(单项数据流) 父组件通过属性绑定传递数据 子组件内部通过props接收数据 基本数据类型---改变父组件的数据--只改变了 父组件的的数据在子组件的显示 通过动态属性绑定 传递list给子组件 在子组件内部修改父组件的复杂数据类型的数据---可以修改 vue3 父子传参 简单易懂 父传子 1. 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" 在这里为了大家区分我将父

  • vue el-upload上传文件的示例代码

    话不多说 直接上代码 <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-list="fileList" :on-preview="handlePreview" :on-success="hand

  • vue 2.0 购物车小球抛物线的示例代码

    本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="droppi

  • js自己实现一个大文件切片上传+断点续传的示例代码

    js自己实现一个大文件切片上传+断点续传的示例代码

    目录 首先我们来分析一下需求 一. 格式校验 二. 文件切片 三. 断点续传 + 秒传 + 上传进度 PM:喂,那个切图仔,我这里有个100G的视频要上传,你帮我做一个上传后台,下班前给我哦,辛苦了.我:...相信每个切图工程师,都接触过文件上传的需求,一般的小文件,我们直接使用 input file,然后构造一个 new FormData()对象,扔给后端就可以了.如果使用了 Ant design 或者 element ui 之类的ui库,那更简单,直接调用一下api即可.当然了,复杂一些的,

随机推荐