每天一点点之 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是用来阻止默 ...
随机推荐
- JetBrains IntelliJ IDEA(IJ)v2019.3.3/3.1/3.2/3.4/3.5 for mac/windows/linux 详细安装破解教程
手欠升级了IntelliJ IDEA到2019.3.3,原来的破解不可用,IntelliJ IDEA 2019.3.3破解办法如下,为方便自己使用记录下.======================= ...
- java#tostring
通常使用apache-commons 来生成tostring方法,但是对于类型为java.util.Date的字段打印效果并不是我们想要的. @Override public String toStr ...
- redis-Hash(哈希表)
Redis hash 是一个string类型的field和value的映射表,它的添加.删除操作都是O(1)(平均).hash特别适用于存储对象,将一个对象存储在hash类型中会占用更少的内存,并且可 ...
- 「NOIP2009」靶形数独
传送门 Luogu 解题思路 这题其实挺简单的. 首先要熟悉数独,我们应该要优先搜索限制条件多的行,也就是可能方案少的行,显然这样可以剪枝,然后再发挥一下dfs的基本功就可以了. 细节注意事项 爆搜题 ...
- 留学Essay写作:精准用词很重要
很多觉得自己英语成绩还行的同学经常在自己的文章里用一些浮夸或者是难度特别大的词语,以显示自己的英语水平.当然了,成功了倒也无可厚非,要是有些词语用错了那可是会被别人笑掉大牙的.因此英语中的精准用词就成 ...
- JAVA虚拟机:内存回收策略及算法
java虚拟机中的程序计数器区.虚拟机栈区.本地方法栈区3个区域是随着线程的创建而创建,随着线程的结束而结束时,内存自然得到回收,所以这三个区域不需要过多考虑内存的回收问题. java虚拟机中的方法区 ...
- SciPy 基础功能
章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...
- uni-app小程序滑动事件
<view class="relative" @touchmove="handletouchmove" @touchstart="handlet ...
- java 搭积木
搭积木 小明最近喜欢搭数字积木, 一共有10块积木,每个积木上有一个数字,0~9. 搭积木规则: 每个积木放到其它两个积木的上面,并且一定比下面的两个积木数字小. 最后搭成4层的金字塔形,必须用完所有 ...
- WireShark 之抓包QQ协议