定义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. Windows下Redis缓存服务器的使用 .NET StackExchange.Redis Redis Desktop Manager 转发非原创

    Windows下Redis缓存服务器的使用 .NET StackExchange.Redis Redis Desktop Manager   Redis缓存服务器是一款key/value数据库,读11 ...

  2. Mybatis学习总结(八)——延迟加载

    一.什么是延迟加载 resultMap可以实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 需求: ...

  3. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  4. Java关键字(五)——this

    this 也是Java中的一个关键字,在<Java编程思想>第四版第五章5.4小节对 this 关键字是这样介绍的: this 关键字只能在方法内部使用,表示对“调用方法的那个对象”的引用 ...

  5. 记上海技术交流会之行备忘录(superset与odoo整合)

    像每个早上一样,早起跑步回来冲个热水澡,简单的吃下早饭,看书到8:50的样子,准备赶10:02分的火车.在我看到周总的微信时,我知道这将是一个新的起点,在自己过往的2年时间,将更多的精力和时间用在了英 ...

  6. ASP.NET MVC必须知道的那些事!

    MVC的由来: 在MVC模式之前,View界面的呈现.用户交互操作的捕捉与相应.业务流程的执行以及数据的存储等都是在一起的,这种设计模式叫自治视图. 这重设计模式主要存在三大弊端: 重用性:业务逻辑与 ...

  7. Item 14: 如果函数不会抛出异常就把它们声明为noexcept

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 在C++98中,异常规范(exception specificat ...

  8. dcoker搭建wordpress

    下载wordpress镜像 docker pull wordpress 创建wordpress容器 docker run -d --name wordpress --link mysql:mysql ...

  9. MYSQL中SUM (IF())

    今天一个朋友突然给我发过来一个sql语句,一下子问住我了. 我想,这种语法木有见过呀.我就查了查,才明白什么意思,原来是mysql里面的用法. SUM(IF(`hosts`.state = 0, 1, ...

  10. UVA 10820 欧拉函数模板题

    这道题就是一道简单的欧拉函数模板题,需要注意的是,当(1,1)时只有一个,其他的都有一对.应该对欧拉函数做预处理,显然不会超时. #include<iostream> #include&l ...