自定义组件Component
定义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的更多相关文章
- ionic3.x angular4.x ng4.x 自定义组件component双向绑定之自定义计数器
本文主要示例在ionic3.x环境下实现一个自定义计数器,实现后最终效果如图: 1.使用命令创建一个component ionic g component CounterInput 类似的命令还有: ...
- Yii2.0 高级模版编写使用自定义组件(component)
翻译自:http://www.yiiframework.com/wiki/760/yii-2-0-write-use-a-custom-component-in-yii2-0-advanced-tem ...
- ExtJS关于组件Component生命周期
extjs组件生命周期大体分为3个阶段:初始化.渲染.销毁. 第一阶段:初始化 初始化工作开始于组件的诞生,所有必须的配置设定.事件注册.预渲染处理等都在此时进行. 1.应用组件的配置: 当初始化一个 ...
- Android开发——构建自定义组件
Android中,你的应用程序程序与View类组件有着一种固定的联系,例如按钮(Button). 文本框(TextView), 可编辑文本框(EditText), 列表框(ListView), 复选框 ...
- Flex自定义组件开发之日周月日期选择日历控件
原文:Flex自定义组件开发之日周月日期选择日历控件 使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...
- Flash CS 自定义组件
2012年的时候,做了一些研究,可以后来没有去整理,没有去用到项目里头,现在把这些东西都放出来纪念一下,也给有需要的人作为参考. 基本知识: Flash使用基本知识与ActionScript 3.0的 ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- ionic3+angular4开发混合app 之自定义组件
这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了 ...
随机推荐
- Java中class的getName()和getCanonicalName()两个方法的区别
getName()返回的是虚拟机里面的class的表示 getCanonicalName()返回的是更容易理解的表示 对于普通类来说,二者没什么区别,只是对于特殊的类型上有点表示差异 比如byte[] ...
- 【转】linux在shell中获取时间 date巧用
echo `date +%Y-%m-%d" %H:%M:%S"` 获得当天的日期 date +%Y-%m-%d 输出: 2011-07-28 date1=$(date --date ...
- 数组升序排序的方法Arrays.sort();的应用
package com.Summer_0421.cn; import java.util.Arrays; /** * @author Summer * 数组升序排序的方法Arrays.sort();应 ...
- Linux下配置mysql远程访问
1 编辑mysql的配置文件 mysqld.cnf root@iZwz99xkrnh5xye3zgi4btZ:~# vi /etc/mysql/mysql.conf.d/mysqld.cnf 2 把 ...
- Spring Cloud Config 分布式配置中心【Finchley 版】
一. 介绍 1,为什么需要配置中心? 当服务部署的越来越多,规模越来越大,对应的机器数量也越来越庞大,靠人工来管理和维护服务的配置信息,变得困难,容易出错. 因此,需要一个能够动态注册和获取服务信息的 ...
- DOM(二)
文档信息 document对象还有一些标准的Document对象所没有的属性: title属性:包含着<title>元素中的文本——显示在浏览器窗口的标题栏或标签页上,通过整个属性可以取得 ...
- 一次Java内存泄露处理手记
现象 最近项目组从NET平台迁移到Java的Dubbo平台上,由于大家都是Java的生手,发生了蛮多的问题,以后一一记录.现在解决一个遇到的关于Java程序内存泄露的问题. 特别说明 Java萌新,理 ...
- 【小技巧】css文字两端对齐
一.文字两端对齐方法: text-align-last: justify; 二.举个丽子: 三.效果如下: 四.注意: 要使文字在容器中两端对齐,该容器需要是一个块级元素,要有自己的宽度.
- Day13 Python基础之time/datetime/random模块一(十一)
time模块 import time print(help(time)) time.time() #return current time in seconds since the Epoch as ...
- 【kindle笔记】之 《黑客微百科》-2018-6-17
前段时间复习六级的时候,从图书馆看到一本书,然后带回来了.今天开始读.今天是2018年6月17日. 严格来讲,一本不算kindle笔记的笔记,不过广义的啃豆笔记了解一下.哈哈. 首页说到的黑客理念是: ...