小程序组件,在components文件夹右击-->建立文件夹-->右击-->新建component便可 建立一个组件vue
若是多个地方须要使用到,能够在app.json中加入一下代码,至关于vue的全局组件。json
"usingComponents": { "btn": "/components/文件夹名/js文件名" }
若是单独引用,直接在引用的json文件中小程序
"usingComponents": { "btn": "/components/文件夹名/js文件名", }
若是是想用page里面的一个页面做为组件 只须要将他改成和component 格式同样便可 (在page里面写了,又忽然以为须要做为组件,能够用这个方法直接将整个文件丢进components) 必定要注意改造一下app
须要注意的是小程序组件有本身的生命周期,文档this
参考大佬连接 https://www.jianshu.com/p/7f366aba54c3spa
组件之间传参数 感受和vue有一丢丢类似code
父传子component
父组件中写 传过去的值。传过去了以后呢,就直接他娘的 this.data.name 就拿到父组件传过去的值了 例如 blog
父组件 固然这个name 是须要在父组件中的data里面定义的
<view> <btn name='{{name}}'></btn> </view>
子组件 Component({ //vue里面是props(缩写),这里是全称。用来接收父组件传过来的东西 properties: { name: { type: String,//类型 value: 'xxx'//默认值 } }, data: { } })
子传父 咱先在子组件中 搞点事儿生命周期
子组件中搞de事儿
Component({ //vue里面是props(缩写),这里是全称。用来接收父组件传过来的东西 properties: { name: { type: String,//类型 value: 'xxx'//默认值 } }, data: { }, methods:{ giveFarther(){ this.triggerEvent('giveFarther', { xixi: "666传值成功" }); //这里giveFarther就是事件名,后面带着的就是传过去值 } } })
<view> <btn name='{{name}}' bind:giveFarther="getSonName"></btn> //这里 就是在组件中绑定了一个子组件的事件名 giveFarther 随后在js中写 </view>
想象下面是JS文件哈
giveFarther(ev){
console.log(ev) //打印看看
}