微信小程序知识点

创建组件：                       以header组件为例

1、将header.json中

"component":true

2、将header.js中

Component({})

3、在需要使用组件的地方，他下面的json文件中获取组件

  "usingComponents": {  
      "header":"/pages/components/header/header"
  }

4、在它的wxml下就可以直接使用了

  <header></header>

组件传值：页面给组件传值          以header组件为例

1、在页面中，给组件的标签设置要传的值

  <header    
  pageTitle="首页"
  >
  </header>

2、在组件中，给组件的js文件设置一个properties进行接收

Component({  
    properties:{    
        pageTitle:String   //前面是传值的名称，加上page代表从页面传来的值，后面是类型  
    }
}) 

3、在组件中，就可以直接给标签上动态添加值

<view>  
    {{pageTitle}} //如：header中的内容应随页面发生变化
</view>

组件传值：组件给页面传值          以header组件为例

1、当组件被调用时，会执行 attached 的函数，在组件中

Component({ 
    console.log("触发了")   // 触发了
}) 

2、紧接在上面的 attached 函数中添加 this.triggerEvent("自定义事件名",要传递的值)

  attached(){    
    this.triggerEvent("handle",123)    //自定事件名为handle    传递数字123  
  }

3、在页面中，在标签中触发自定义事件

  <header    
    bindhandle="handleGet"    //bind+传递过来的事件名    
    //bind、catch绑定事件，区别：bindtap(点击事件有冒泡)、catchtap(点击无冒泡)  
  >
  </header>

4、在页面的js中

Page({  
    handleGet(e){    
        console.log(e.detail)    // 123  
    }
})

组件事件：    必须在methods中

1、在组件中，给标签添加事件，如：点击事件

<view 
catchtap='handleClick'
>  
    {{pageTitle}}
</view>

2、在组件中，在Component下添加methods

Component({  
    methods:{    
        handleClick(){
          console.log("点击了")    
        }  
    }
})