[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. 传参 在使用的模板中自定义一个属性然后在模板文件中定义类型 ~~~ 对象 ———>在模板文件中就是 上个模板定义的 属性名点属性 传给下一个页面 数组 ———>在模板文件中就是 上个模板定义的 属性名 传给下一个页面 字符串 ———>在模板文件中就是 属性传给下一个页面 如上例子 数字 ———>在模板文件中就是 上个模板定义的 属性名传 给下一个页面 ~~~