定义compa组件

由4个页面构成

compa.js:

compa.json:

compa.wxml:

compa:wxss:

1、compa.json:在json文件进行自定义组件声明

{
"component": true,
"usingComponents": {}
}

2、compa.js:构造组件,并提供组价的属性定义、内部数据和自定义方法

Component({    //调用Component构造器构造组件
options: { //一些选项
multipleSlots: true //运行多个插槽
},
properties: { //组件的对外属性
innerText: { //属性名采用驼峰法,在wxml中,指定属性值时对应使用连字符法(inner-tex)
type: String,
value: 'default value',
}
},
data: { //组件的内部数据
someData: {}
},
methods: { //组件的方法
customMethod: function() { }
}
})

3、compa.wxml:编写组件模板

<view class="inner">
<slot name="before"></slot>
<view>{{innerText}}</view>
<slot name="after"></slot>
</view>

4、compa.wxss:加入组件样式

.inner {
color: red;
}

使用compa组件

1、index.json:在页面的json文件中进行引用声明

{
"usingComponents": {
"compa": "./compa/compa",
"compb": "./compb/compb"
}
}

2、index.wxml:使用自定义组件

<compa inner-text="">  //区别于:<view data-hi="WeChat"></view>
<view slot="before">before</view> <view slot="after">before</view> </compa> <compb></compb>

注意:

1、在组件的 properties 定义段中,属性名采用驼峰写法(innerText);在使用组件的页面 wxml 中,指定属性值时则对应使用连字符写法(inner-text),组件模板中应用于数据绑定时采用驼峰写法({{innerText}}"

2、属性名应避免以 data 开头,即不要命名成 dataXyz 这样的形式,因为在 WXML 中, data-xyz="" 会被作为节点 dataset 来处理,而不是组件属性。

自定义组件Component的更多相关文章

  1. ionic3.x angular4.x ng4.x 自定义组件component双向绑定之自定义计数器

    本文主要示例在ionic3.x环境下实现一个自定义计数器,实现后最终效果如图: 1.使用命令创建一个component ionic g component CounterInput 类似的命令还有: ...

  2. Yii2.0 高级模版编写使用自定义组件(component)

    翻译自:http://www.yiiframework.com/wiki/760/yii-2-0-write-use-a-custom-component-in-yii2-0-advanced-tem ...

  3. ExtJS关于组件Component生命周期

    extjs组件生命周期大体分为3个阶段:初始化.渲染.销毁. 第一阶段:初始化 初始化工作开始于组件的诞生,所有必须的配置设定.事件注册.预渲染处理等都在此时进行. 1.应用组件的配置: 当初始化一个 ...

  4. Android开发——构建自定义组件

    Android中,你的应用程序程序与View类组件有着一种固定的联系,例如按钮(Button). 文本框(TextView), 可编辑文本框(EditText), 列表框(ListView), 复选框 ...

  5. Flex自定义组件开发之日周月日期选择日历控件

    原文:Flex自定义组件开发之日周月日期选择日历控件         使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...

  6. Flash CS 自定义组件

    2012年的时候,做了一些研究,可以后来没有去整理,没有去用到项目里头,现在把这些东西都放出来纪念一下,也给有需要的人作为参考. 基本知识: Flash使用基本知识与ActionScript 3.0的 ...

  7. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  8. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  9. ionic3+angular4开发混合app 之自定义组件

    这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了 ...

随机推荐

  1. Java中class的getName()和getCanonicalName()两个方法的区别

    getName()返回的是虚拟机里面的class的表示 getCanonicalName()返回的是更容易理解的表示 对于普通类来说,二者没什么区别,只是对于特殊的类型上有点表示差异 比如byte[] ...

  2. 【转】linux在shell中获取时间 date巧用

    echo `date +%Y-%m-%d" %H:%M:%S"` 获得当天的日期 date +%Y-%m-%d 输出: 2011-07-28 date1=$(date --date ...

  3. 数组升序排序的方法Arrays.sort();的应用

    package com.Summer_0421.cn; import java.util.Arrays; /** * @author Summer * 数组升序排序的方法Arrays.sort();应 ...

  4. Linux下配置mysql远程访问

    1 编辑mysql的配置文件 mysqld.cnf root@iZwz99xkrnh5xye3zgi4btZ:~# vi /etc/mysql/mysql.conf.d/mysqld.cnf 2 把  ...

  5. Spring Cloud Config 分布式配置中心【Finchley 版】

    一. 介绍 1,为什么需要配置中心? 当服务部署的越来越多,规模越来越大,对应的机器数量也越来越庞大,靠人工来管理和维护服务的配置信息,变得困难,容易出错. 因此,需要一个能够动态注册和获取服务信息的 ...

  6. DOM(二)

    文档信息 document对象还有一些标准的Document对象所没有的属性: title属性:包含着<title>元素中的文本——显示在浏览器窗口的标题栏或标签页上,通过整个属性可以取得 ...

  7. 一次Java内存泄露处理手记

    现象 最近项目组从NET平台迁移到Java的Dubbo平台上,由于大家都是Java的生手,发生了蛮多的问题,以后一一记录.现在解决一个遇到的关于Java程序内存泄露的问题. 特别说明 Java萌新,理 ...

  8. 【小技巧】css文字两端对齐

    一.文字两端对齐方法:  text-align-last: justify; 二.举个丽子:  三.效果如下:  四.注意:  要使文字在容器中两端对齐,该容器需要是一个块级元素,要有自己的宽度.

  9. Day13 Python基础之time/datetime/random模块一(十一)

    time模块 import time print(help(time)) time.time() #return current time in seconds since the Epoch as ...

  10. 【kindle笔记】之 《黑客微百科》-2018-6-17

    前段时间复习六级的时候,从图书馆看到一本书,然后带回来了.今天开始读.今天是2018年6月17日. 严格来讲,一本不算kindle笔记的笔记,不过广义的啃豆笔记了解一下.哈哈. 首页说到的黑客理念是: ...