[TOC] ### 1. 組件介紹 ~~~ 組件就是封裝模板 而封裝模板只能做到對html的封裝 不能做到對js代碼的封裝 在html上綁定的點擊事件等 就可以使用組件將js封裝在js中的methods中 ~~~ ### 2. 創建模板（在模板文件中 使用頁面中傳的參中的數據） ~~~ <view class="movie-item" catchtap="onClick"> <image src="{{imgUrl}}"></image> <text>{{title}}</text> </view> ~~~ ### 3. 在js中注冊用到的屬性（在模板文件中 里面的數據是用來接收使用頁面中的參數的 不注冊使用不了） ~~~ properties: { movieId:String, title:String, imgUrl:String }, ~~~ ### 4. 將事件的處理方法放在methods方法中（在模板文件中） ~~~ methods: { onClick(){ var movieId = this.properties.movieId; wx.navigateTo({ url: '/pages/movie-detail/movie-detail?movieId='+movieId, }) } } ~~~ ### 5. 在json中配置 （在使用的頁面 相當于樞紐將使用頁面和模板頁面鏈接起來 只要在json中注冊之后就能夠使用模板文件） ~~~ { "usingComponents": { "v-movie-item":"/components/movie-item/index" } } ~~~ ### 6. 使用模板 （在使用的頁面 模板文件中還可以使用模板文件只要在上方的json中注冊就可以了） ~~~ <view class="container"> <block wx:for="{{movies}}" wx:key="index" > <v-movie-item movieId="{{item.id}}" imgUrl="{{item.imgUrl}}" title="{{item.title}}"></v-movie-item> </block> </view> ~~~ ### 7. 傳參 在使用的模板中自定義一個屬性然后在模板文件中定義類型 ~~~ 對象 ———>在模板文件中就是 上個模板定義的 屬性名點屬性 傳給下一個頁面 數組 ———>在模板文件中就是 上個模板定義的 屬性名 傳給下一個頁面 字符串 ———>在模板文件中就是 屬性傳給下一個頁面 如上例子 數字 ———>在模板文件中就是 上個模板定義的 屬性名傳 給下一個頁面 ~~~