每天一点点之 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是用来阻止默 ...
随机推荐
- 回文数索引(string类erase解题)
题目描述 给定一个仅由小写字母组成的字符串.现在请找出一个位置,删掉那个字母之后,字符串变成回文.请放心总会有一个合法的解.如果给定的字符串已经是一个回文串,那么输出-1. 输入描述: 第一行包含T, ...
- Python入门知识总结【新手必学】
Python 基础学习输入和输出list 和 tuple条件判断循环dict 和 set感觉python这门语言用途较广,先熟悉下其语法.PS:另外很多人在学习Python的过程中,往往因为没有好的教 ...
- 前端学习笔记系列一:13new Date()的参数
前两天发现手机页面的倒计时在Android上正常显示,在iPhone却不能显示. 后来又发现在ff和ie里也不显示.(以前只在chrome里看过,显示正常). 后来同事改了new Date()里字符串 ...
- Socket传输大文件(发送与接收)
下载 Client using System; using System.Collections.Generic; using System.Linq; using System.Text; usin ...
- 题解 P2801 【教主的魔法】
分块入门题,不错的,建议大家做一做 开始学习 先看一下数列分块入门 2 这道题想让我们求区间[l,r]>=c的个数,然后我们可以看到"数列分块入门 2"是求区间[l,r]&l ...
- js默认字符处理
utf-16 每个字符是2个字节 超过2字节,就是4个字节表示
- mysql分区介绍
http://www.cnblogs.com/chenmh/p/5644713.html 介绍 可以针对分区表的每个分区指定各自的存储路径,对于innodb存储引擎的表只能指定数据路径,因为数据和索引 ...
- 吴裕雄--天生自然JAVA面向对象高级编程学习笔记:宠物商店实例分析
interface Pet{ // 定义宠物接口 public String getName() ; public String getColor() ; public int getAge() ; ...
- Windows驱动开发-符号链接和设备名
windows下的设备是以"\Device\[设备名]”形式命名的. 例如磁盘分区的C盘,D盘的设备名称就是 "\Device\HarddiskVolume2” "\De ...
- 第1节 IMPALA:1、impala的基本介绍
impala的介绍: impala是cloudera公司开源提供的一款高效率的sql查询工具 impala可以兼容hive的绝大多数的语法,可以完全的替代表hive impala与hive的关系:紧耦 ...