每天一点点之 taro 框架开发 - taro调用组件传值
1.调用组件
组件文件
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components' export default class Dialog extends Component {
render () {
return (
<View className='index'>
我是弹窗组件
</View>
)
}
}
调用
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import Dialog from './dialog'
export default class TestDialog extends Component {
render () {
return (
<View className='index'>
<View>TestDialog</View>
<Dialog></Dialog>
</View>
)
}
}
2.向组件传值
组件
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components' export default class Dialog extends Component {
render () {
return (
<View className='index'>
我是弹窗组件
{
this.props.children
}
</View>
)
}
}
调用
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button, Image } from '@tarojs/components'
import Dialog from './dialog'
export default class TestDialog extends Component {
render () {
return (
<View className='index'>
{/* TestDialog */}
<Dialog>
<Text>我是test传入的</Text>
</Dialog>
<Dialog>
<Image src={require('../../lib/img/二哈.jpg')}/>
</Dialog>
<Dialog>
<Button>按钮</Button>
</Dialog>
</View>
)
}
}
注意:在组件中的 this.props.children 是只读的,不能进行更改
3.向组件传递多个值
由于组件接收的值不能更改,那么如果想要在组件接收多个值,就会出现问题,针对这种情况方案如下:
在调用页面给组件名定义属性,在组件通过 this.props.myText 来接收值,代码如下:
组件
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components' export default class Dialog extends Component {
render () {
return (
<View className='index'>
我是弹窗组件
{ this.props.myText }
{
this.props.children
}
</View>
)
}
}
调用
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button, Image } from '@tarojs/components'
import Dialog from './dialog'
export default class TestDialog extends Component {
render () {
return (
<View className='index'>
{/* TestDialog */}
<Dialog myText={<Text>我是myText传入的</Text>}>
<Text>我是test传入的</Text>
</Dialog>
<Dialog>
<Image src={require('../../lib/img/二哈.jpg')}/>
</Dialog>
<Dialog>
<Button>按钮</Button>
</Dialog>
</View>
)
}
}
每天一点点之 taro 框架开发 - taro调用组件传值的更多相关文章
- 每天一点点之 taro 框架开发 - taro静态资源引入
1.说明: taro中客园自由的引用静态资源,不需要安装任何的loader 引用样式文件 通过ES6的import引入 2.引用js文件 import { functionName } from '. ...
- 每天一点点之 taro 框架开发 - taro路由及传参
1.路由 taro的路由是自带的,不需要我们额外配置,只需要我们在app.js下config中配置pages即可 class App extends Component { config = { pa ...
- 每天一点点之vue框架开发 - 引入Jquery
1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...
- 每天一点点之vue框架开发 - 使用vue-router路由
1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- 【WePY小程序框架实战三】-组件传值
[WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 父子组件传值 静态传值 静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型. 父组件 (paren ...
- 每天一点点之 taro 框架开发 - 事件处理与样式表
1.方法调用 state = { name:'张三' } test(){ this.state.name } <button onClick={ this.test.bind(this) } / ...
- 每天一点点之vue框架开发 - vue坑-This relative module was not found
94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * . ...
- 每天一点点之vue框架开发 - @click-native-prevent
1.在封装好的组件上使用,所以要加上.native才能click 2.prevent就相当于..event.preventDefault() 所以@click.native.prevent是用来阻止默 ...
随机推荐
- SICOM SOP
SOPs A Service-Object Pair (SOP) Class is defined by the union of an Information Object Definition ( ...
- 易升地址,windows 10, 1511 升级 1607 仍然有效
https://www.microsoft.com/zh-cn/software-download/windows10 易升地址, windows 10 ,1511 升级 1607 仍然有效
- 有关WordPress的Rss导入指南
我是用cublog转过来.有一个软件博客备份软件(blog_backup)可以备份那个的blog.我用他备份后导出成rss2的文件.但我导入了很多次不成功.后来发现,原来blog_backup导出的格 ...
- MySQL 加密 压缩
许多MySQL加密和压缩函数返回结果可能包含任意字节值的字符串,如果要存储这些结果,请使用VARBINARY或BLOB二进制字符串数据类型.这将避免使用非二进制字符串数据类型(CHAR, VARCHA ...
- JuJu团队1月2号工作汇报
JuJu团队1月2号工作汇报 JuJu Scrum 团队成员 今日工作 剩余任务 困难 飞飞 -- 测试dataloader 无 婷婷 调试代码 提升acc 无 恩升 -- 测试dataloade ...
- shell 脚本终止进程
参考:https://blog.csdn.net/zhaoyue007101/article/details/7699259 $(pidof 进程名关键字)
- Linux 安装 go 以及 arm linux 移植 go
背景 Go是一门全新的静态类型开发语言,具有自动垃圾回收,丰富的内置类型,函数多返回值,错误处理,匿名函数,并发编程,反射等特性. 从Go1.4之后Go语言的编译器完全由Go语言编写,所以为了从源代码 ...
- 使用PYaudio录制音频和视频(自己)
参考:https://blog.csdn.net/zhaoyun_zzz/article/details/84341801 音频录制:简洁版 import pyaudioimport waveimpo ...
- xilinx FPGA课程学习总结
一时冲动,跑步进入了FPGA的大门,尤老师是教练,我之前一直做嵌入式软件,数字电路也是十年前大学课堂学过,早已经还给老师了.FPGA对于我来说完全是小白,所以.老师的课程,对于我来说至关重要!因为见过 ...
- Ado.NET SQLHelper(2)
测试发现前面发的那个功能太简单,不能调用getdate()等内部函数. 完善后重载了insert和update两个功能,将函数作为字符串传入SQL语句构造,需要的可以试用一下 using Sys ...