微信小程序自定义组件_心病_前端开发者

微信小程序自定义组件

一. 创建自定义组件

类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成

jsonwxmlwxssjs

二.组件声明

首先需要在自定义组件所在的 json 文件中进行自定义组件声明

json

{
  "component": true
}

{
"component": true
}

三.编辑组件

同时,还要在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式

wxmlwxss

wxml与xcss和普通页面设置差不多

wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
    <slot></slot>
</view>

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
{{innerText}}
<slot></slot>
</view>

xcss

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

/* 这里的样式只应用于这个自定义组件 */
.inner {
color: red;
}

js文件设置有点区别

Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法,方法必须写在methods内
    customMethod: function(){}
  }
})

Component({
properties: {
// 这里定义了innerText属性,属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法,方法必须写在methods内
customMethod: function(){}
}
})

四.再使用该组件的组件页面

首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径

json

	// 引用声明
  "usingComponents": {
  	// 要使用的组件的名称     // 组件的路径
    "component-tag-name": "path/to/the/custom/component"
  }
}

// 引用声明
"usingComponents": {
// 要使用的组件的名称 // 组件的路径
"component-tag-name": "path/to/the/custom/component"
}
}

组件的使用和vue一样,

在wxml文件中

<component-tag-name></component-tag-name>

<component-tag-name></component-tag-name>

五.父组件中显示子组件内的变量

父组件的wxml页面传输值

<component-tag-name></component-tag-name>

<component-tag-name></component-tag-name>

子组件的wxml

<view>{{变量名}}</view>

<view>{{变量名}}</view>

让父组件内显示子组件的内容

 #在组件中
   properties: {
    变量名:{
      type:String,
      value:"变量值"
    }
  }
//而不是把变量名放在data中

#在组件中
properties: {
变量名:{
type:String,
value:"变量值"
}
}
//而不是把变量名放在data中

六.触发子组件的事件时候触发父组件的事件

父组件页面

 页面
 <component-tag-name bind:icre="icre"></component-tag-name>

页面
<component-tag-name bind:icre="icre"></component-tag-name>

父组件的js

页面中js
  icre:function(e){
    console.log(e)
    this.setData({
        num:this.data.num+1
    })
  },

页面中js
icre:function(e){
console.log(e)
this.setData({
num:this.data.num+1
})
},

子组件页面

<button bindtap='clickpush'>加我</button>

<button bindtap='clickpush'>加我</button>

子组件的js

clickpush:function(e){
      console.log(e)
      this.triggerEvent("icre",{"index":13},{})
    }

clickpush:function(e){
console.log(e)
this.triggerEvent("icre",{"index":13},{})
}

» 本文来自:前端开发者 » 《微信小程序自定义组件_心病_前端开发者》
» 本文链接地址:https://www.rokub.com/73365.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!