@微信小程序父组件向子组件传递数据

具体步骤如下

首先使用微信开发者工具创建两个页面，父页面(即父组件)名为index，子页面(即子组件)名为Search。

先在index.js中定义一个名为source，值为 'hello world ’ 的数据，这里就是定义要传递给子组件具体数据

  data: {source:'hello world!'},

然后在index.wxml调用的子组件标签 (这里起的名称为aaa) 中自定义一个属性（属性名自己起的），属性值为你要传递给子组件的值（即上文在index.js文件中定义的数据）

<navigator class="home" url="../search/search"><!-- 这里是父组件 --><Search aaa="{{source}}"></Search>
</navigator>

在 Search.js 中的 properties 中定义自定义属性

     格式是： 属性名: {type: 属性类型value: 初始值          }Component({组件的属性列表properties: {aaa:{type: String,value: ''}}})

最后只需要在Search.wxml中渲染这个值即可(做法类似调用data中的数据)

    <!-- 这里是子组件 --><!-- 在这里直接使用父组件传递的值 ,注意：插值表达式里面应该是自定义属性名 --><view>{{ aaa }}</view>

渲染成功

微信小程序父组件向子组件传递数据相关推荐

微信小程序：页面跳转时传递数据到另一个页面
一.功能描述页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示二.功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page ...
微信小程序wpy框架给子组件传boolean值无效
1.问题在给子组件传Boolean类型的prop时,发现没生效. <backtohome :isRrlog="true"></backtohome> 2. ...
微信小程序如何封装自己的组件？
在现在前端领域,最常见的话语就是组件化.工程化的内容.所有的框架都在朝着这方面发展.作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发. 在我们的日常开发中,可以封装一些常用的组件达到复用效果 ...
微信小程序，自定义导航栏组件
微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客可定义设置的内容如下: 文字及返回箭头颜色背景图片(优先级高于 ...
微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
微信小程序（第二十四章）- 数据交互前置
微信小程序(第二十四章)- 数据交互前置讲解微信小程序前置的原因参考文档理解微信小程序小程序简介作用提问针对提问--uni-app介绍小程序和普通网页开发的区别小程序代码构成文件个 ...

微信小程序父组件向子组件传递数据

具体步骤如下

微信小程序父组件向子组件传递数据相关推荐

最新文章

热门文章