微信小程序之模板/组件的使用

 

一、template的使用

1.注册模板：在app.json里面注册模板temlate/public,生成模板wxml,wxss,js,json等系列页面，也可以自己创建这些文件。

2.编写模板

<1>无数据传参的模板

<template name="hello">
  <view>hello world!</view>
</template>

<2>带数据传参的模板

<template name="hello2">
  <view wx:for='{{list}}' wx:key="{{key}}">hello world!{{item.name}}</view>
</template>

3.模板的使用

<1>引入模板页面

<import src="../template/hello/hello.wxml"/>

<2>使用模板

<view>
  <template is="hello" ></template>
  <template is="hello2" data="{{list}}"></template>
  
</view>

注意:

1.引用的template传入的data参数名字(data="{{list}}")要与注册时template使用的(wx:for="{{list}}" 时)的参数名字相同

2.template的data是有作用域的,外部参数通过data传入注册的template里面,只作用与template局部,可重复引用

 

 

二、自定义组件的使用

1.注册组件：在app.json里面注册模板components/myComponent/myComponent, 生成模板wxml,wxss,js,json等页面，也可以自己创建这些文件。

2.编辑组件

wxml:

<view class="inner">

    <text>hi,I am {{ uname }}</text>

</view>

json:

{
  "component": true
}

js:

const app = getApp()
Component({
   properties: {
   // 这里定义父组件传值的属性
      uname: {
         type: String,
         value: '张三',    //默认值设置
      }
   },
   data: {
      // 这里是组件内部数据
      someData: {}
   },
   methods: {
      customMethod(){
         //子组件传值给父组件
         this.triggerEvent("toParent","hello world! I am learning 微信小程序")
         
      }
   }

})

    

　　

3.组件的使用：在要引入的组件的json文件中加入

{
  "usingComponents": {

     //组件名(自定义)以及组件所在路径

     "myComponent": "../../components/myComponent/myComponent" 
   }
}

在要引入的组件的wxml文件中加入

<view>
    <myComponent id="myComponent" uname="{{username}}" bind:toParent="getSome"></myComponent> </view>

 引入组件的js:

data:{
    username:'木兰'
}，

getSome(e){
  var data=e.detail   //从子组件获得的数据

}