话不多说,直接上代码

父组件:

<span><humidity-component ref="soilHumidityBot" :title='title2'></humidity-component></span>
data () {
return {
title2: '土壤湿度' }
}

在子组件HumidityComponent.vue中:

data () {
return {
myChart: ''
}
},
props: {
title: {
type: String,
default: ''
}
}

然后调用的时候直接this.title就可以了,

在页面上就会显示“土壤湿度”这个title了

如图:

props 父组件给子组件传递参数的更多相关文章

  1. Vue父组件与子组件传递事件/调用事件

    1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...

  2. react学习-react父组件给子组件传值与设置传值类型以及是否必传参数

    react 父组件给子组件传参时,父组件直接在引入的子组件内写入要传递的参数即可 <HeaderComponent title={"传递的参数"}></Heade ...

  3. Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue父组件与子组件之间的数据传递

    父组件向子组件传递数据 父组件用数据绑定:子组件用props接收 <!-- test-vue-model父组件 --> <template> <div> <m ...

  5. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  6. vue之provide和inject跨组件传递属性值失败(父组件向子组件传值的两种方式)

    简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...

  7. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  8. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  9. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  10. 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

    父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

随机推荐

  1. Jconsole与Jmx 分析JVM状况(下) 转

    出处: Jconsole与Jmx 分析JVM状况(下) 线程(ThreadMXBean ) 从 Jconsole 画面取得线程画面如下: 左下角列出了所以正在运行的线程.通过点击某个线程,右下脚可以看 ...

  2. Alibaba开源组件-分布式流量控制框架sentinel初探

    Alibaba开源组件-分布式流量控制框架sentinel初探 2018年12月09日 18:23:11 SuperPurse 阅读数 1965更多 分类专栏: J2EE   版权声明:本文为博主原创 ...

  3. LeetCode题解: LRU Cache 缓存设计

    LeetCode题解: LRU Cache 缓存设计 2014年12月10日 08:54:16 邴越 阅读数 1101更多 分类专栏: LeetCode   版权声明:本文为博主原创文章,遵循CC 4 ...

  4. 关于ionic4导入android studio的注意事项

    最近看IT营的视频的时候,发现视频讲解的打包真是轻松的不得了,但是当自己导入打包的时候,你就会发现,没有最坑,只有更坑,按照教程来打包,估计你这辈子很难还原成功的,下面就来说一下关于 gradle与g ...

  5. @RequestMapping-标准映射和Ant风格的映射

    4.@RequestMapping 如果value不以“/”开头,SpringMVC会自动添加“/” 4.1.@RequestMapping映射 4.1.1.标准URL映射 4.1.2.Ant风格的U ...

  6. Django框架——基础教程(总)

    1. Django简介 Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架 ...

  7. 使用pagehelper分页工具page警告问题

    警告: Hessian/Burlap: 'com.github.pagehelper.Page' is an unknown class in WebappClassLoader java.lang. ...

  8. multipart/form-data请求与文件上传的细节

    <!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8" ...

  9. Linux下部署Kafka分布式集群,安装与测试

    注意:部署Kafka之前先部署环境JAVA.Zookeeper 准备三台CentOS_6.5_x64服务器,分别是:IP: 192.168.0.249 dbTest249 Kafka IP: 192. ...

  10. linux命令详解——yum

    1.如果不知道确切名字可以:rpm -qa|grep pkgname 2.查看软件安装的文件:rpm -qpl pkgname 3.如果不知道提供某个软件的包是叫什么,可以使用类似下面的写法: yum ...