Moon框架入门教程5
组件
Component:英文翻译为:组件。简单的介绍一下:组件就是对象。C++ Builder中叫组件,Delphi中叫部件,而在Visual BASIC中叫控件。 组件是对数据和方法的简单封装。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。
类似于 React/Vue/Angular/Mithril,Moon提供了一套组件系统。组件有两种主要类型,我们将要讨论的是normal components。
注册/登记
调用
component
全局方法来注册一个组件,组件名作为方法的第一个参数,所有的选项作为第二个参数。组件可以使用常规实例采用的(most)参数。
1 | Moon.component("name",{ |
一旦组件备注测,你就可以在你的HTML中这样使用:
1 | <component-name></component-name> |
例如:
1 | <div id='app1'> |
1 | Moon.component('my-component',{ |
这将被渲染成:
1 |
|
组件可以被互相嵌套,并且拥有自己的作用域。更新一个组件的数据不回更新其他组件
Props 小道具
组件不能访问他们父节点的数据,想要从父节点获得数据,可以使用
props
方法。在你的组件选项中定义他们,之后你可以通过模板来调用他们。你可以把他们当作属性来传递。
1 | <div id="app2"> |
1 | Moon.component("my-component",{ |
1 |
|
尝试着输入app2.set('parentMsg','New Parent Data')
并观察组件被更新!
数据
当一个组件需要局部声明,
data
选项正常工作。在组件中,data
选项必须是一个函数。这允许每个组件有一个新的局部声明,独立于其他组件。这个函数应该返回一个对象。下面的例子展示了一个计时器组件,每一个计时器都有一个不同的,独立的,相应按钮按下后会增加的count。如你所见,一个组件可以拥有数据,方法,还有 get/set 方法。
1 | <div id="app3"> |
1 | Moon.component("counter-component",{ |
Try the counter!
Parent/Child Communication
Moon,类似于Vue和React,允许 父节点子节点组件通过一个简单的概念:props down,events up进行通信。
对于子节点通信到父节点,你可以使用props.但是如何让父节点知道子节点的活动呢?对于这个问题,我们可以用时间系统。当事件在一个实例中被局部定义,Moon允许子节点发出父节点可以监听的事件,通过使用
m-on
当创建一个组件的时候。使用类似
m-on:eventName="parentMethod"
可以调用父节点中的方法当一个子节点的事件被发出。
下面是两个局部子节点给父节点加一的例子
1 | <div id="app4"> |
1 | Moon.component("counter-child-component",{ |
如你所见,每一个子节点计数器都会发出一个increment
事件,父节点通过使用在组件元素中使用m-on
来监听。
Slots
当你的组件需要分布被传递给他的内容时,使用 props 往往会让他变得混乱不堪。相反,你可以提供一个带有HTML的组件,这样组件就可以相应分布被传递给他的内容。
Moon拥有叫做 slots来达成目标。一个组件模板可以在任何地方拥有带有
name
选项属性的slot
元素。当一个新的组件实例被创建,它里面的内容就被分布好。没有slot
属性的元素会被按照默认slot放置,拥有slot
属性的元素会被按照相应slot放置。
1 | <div id="app10"> |
1 | Moon.component("slot-component",{ |
试着输入app10.set("parentMsg","New Parent Dat")
;观察组件更新。
Any question please contact 1-riverfish