微信小程序页面与组件之间的联系，页面怎么用组件

最新推荐文章于 2023-04-20 12:56:31 发布

weixin_33739646

最新推荐文章于 2023-04-20 12:56:31 发布

阅读量1.7k

点赞数

文章标签： python json

原文链接：https://my.oschina.net/pingheyongfeng/blog/2878111

版权

2019独角兽企业重金招聘Python工程师标准>>>

第一步在component组件中创建组件的模板

	<!--components/model/model.wxml-->
<view>
<view class="perfact-info-modal" bindtap='closeAuthen'></view>
<view class="perfact-info-container">
	<view class="perfact-info-content">
  	<view class='authen'>
    <text class='authen-tit'>实名认证提醒</text>
    <text class='authen-tip'>根据国家法律法规的规定，为保证您账户资产安全需要您完成实名认证！</text>
    <text class='authen-title'>以下使用场景需要您配合完成实名认证:</text>
    <text class='authen-article'>1.订单支付金额超过500元时</text>
    <text class='authen-article'>2.使用账户余额进行支付时</text>   
    <text class='authen-article'>3.账户余额申请提现时</text>        
    <text class='authen-article'>4.系统检测账户存在安全风险时</text>                     
  </view>
  <button class="perfact-info-button" bindtap='linkToAuthen'>去实名认证测试</button>
</view>
</view>
</view>

在对应的js里面在methods里面添加方法

modal.js
	methods: {
linkToAuthen() {
  this.triggerEvent("changeEvents", { showModelAuthen: false })
}

}

第三步把组件模板应用到页面中是在pages里面添加的页面

	要现在这个页面的json文件 定义一下这个组件的名字然后在页面上用定义的名字当标签使用
	{
"navigationBarTitleText": "商品详情",
"usingComponents": {
"model": "../../component/model/model",   // 这就是路径对应的模板变量

} }

wxml
<model wx:if="{{showModelAuthen}}" bindchangeEvents="changeEvents" />

wxjs
要现在data里面定义showModelAuthen这个变量
这个是使用的方法
changeEvents:function(e){
	this.setData({
 	 showModelAuthen:false
	})
 },

转载于:https://my.oschina.net/pingheyongfeng/blog/2878111