1, 小程序的自定义组件的引用,传值,父组件获取子组件的方法和参数

1, 08_05小程序的自定义组件的引用,传值

首先是组件的引用
	1,在父组件中的json文件中引入
	例如:
		{
 	 "usingComponents": {
   			 "Paying":"/components/paying/paying"	
 			 }
	 }
	2,在父组件中直接使用
		<view>
			<button class="btn_pay">支付</button>
			<Paying/>
		</view>
	这样子组件就可以正常使用
	注:在父组件json中引入组件引入时路径不会自动补全,需手动添加最后的"Paying"
接着是父传子的方法:
	1,在父组件中组件的标签加上需要传的属性,属性名自己定义即可,属性值就是传过去的值
	2,在子组件中的js文件中定义
			  /**
  				 * 组件的属性列表
  				 */
 			 properties: {
   			   title:{
       			 type:String,//传过来的属性类型
       			 value:"弹出层标题1"//没传参的默认值
    			  },
     		   content:{
      		   	 type:String,
      		     value:"弹出层内容1"
     		 }
 		 },
 	3,在组件间中{{属性名}}即可拿到传递的参数
父组获取子组件的方法和参数
1,先给父组件中的组件标签加上一个ID
2,在父组件的js文件中onReady()(页面初次渲染执行)中写入var comname= selectComponent("#ID")通过刚才定义的ID获取组件的信息,然后在父组件中的按钮上增加点击事件,在子组件中的js文件中写上自己需要执行的方法,通过点击父组件的按钮,调用父组件的方法,在父组件的方法中调用this.comname.子组件中的方法名()来调用子组件中的方法
子传父用的是triggerEvent
1,在子组件中的点击事件中执行this.triggerEvent("方法名","参数")
2,在父组件中的子组件的标签上加上一个属性bind方法名=“在父组件中的js方法”
3,在父组件中的js文件中执行“在父组件中的js方法(e){console.log(e)}”这里可以看到detail就是自己的从子组件传过来的值
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页