微信小程序父组件使用子组件并传参

Posted 2021-06-06 lude1994

1.创建一个子组件colNav

2.将创建的子组件中的js文件的Page改成Component，必要

3.在子组件的json文件中，设置"component": true

{
  "usingComponents": {},
  "component": true
}

4.子组件接收父组件传来的参数，在js中接收

 properties: {
   
    route: String,
    title: String,
    num: String,
   

  },

5.子组件使用父组件传来的参数

<text class="num">{{num}}</text>

 

 

 

6.父组件使用子组件

"usingComponents": {
    "colNav": "/pages/component/colNav/index"
  },

 

7.在父组件中调用子组件

<colNav title=\'收藏\' num=\'23\' route="" />

 

7.父组件引入子组件的css和js

@import \'/pages/component/colNav/index.wxss\';           // 在父组件的wxss文件中引入

import \'../component/colNav/index\'　　　　　　　　　　　　// 在父组件的js文件中引入