Moon框架入门教程5

发布于 2017-09-03 tech Moon 

Moon框架入门教程5

组件

Component：英文翻译为：组件。简单的介绍一下：组件就是对象。C++ Builder中叫组件，Delphi中叫部件，而在Visual BASIC中叫控件。 组件是对数据和方法的简单封装。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。

类似于 React/Vue/Angular/Mithril，Moon提供了一套组件系统。组件有两种主要类型，我们将要讨论的是normal components。

注册/登记

调用component全局方法来注册一个组件，组件名作为方法的第一个参数，所有的选项作为第二个参数。组件可以使用常规实例采用的(most)参数。

1
2
3

Moon.component("name",{
  //options
});

一旦组件备注测，你就可以在你的HTML中这样使用：

1

<component-name></component-name>

例如：

1
2
3

<div id='app1'>
	<my-component></my-component>
</div>

1
2
3
4
5
6
7

Moon.component('my-component',{
  template: "<p>This is a Component!</p>"
});

const app1 = new Moon({
  el: "#app1"
});

这将被渲染成：

1
2

This is a Component!

组件可以被互相嵌套，并且拥有自己的作用域。更新一个组件的数据不回更新其他组件

Props 小道具

组件不能访问他们父节点的数据，想要从父节点获得数据，可以使用props方法。在你的组件选项中定义他们，之后你可以通过模板来调用他们。你可以把他们当作属性来传递。

1
2
3

<div id="app2">
	<my-component content="{{parentMsg}}"></my-component>
</div>

1
2
3
4
5
6
7
8
9
10
11

Moon.component("my-component",{
  props: ['content'],
  template: "<p>Data from Parent: {{content}}</p>"
});

const app2 = new Moon({
  el: "#app2",
  data: {
    parentMsg: "Parent Data"
  }
});

1
2

Data from Parent:Parent Data

尝试着输入app2.set('parentMsg','New Parent Data')并观察组件被更新！

数据

当一个组件需要局部声明，data选项正常工作。在组件中，data选项必须是一个函数。这允许每个组件有一个新的局部声明，独立于其他组件。这个函数应该返回一个对象。

下面的例子展示了一个计时器组件，每一个计时器都有一个不同的，独立的，相应按钮按下后会增加的count。如你所见，一个组件可以拥有数据，方法，还有 get/set 方法。

1
2
3
4

<div id="app3">
	<counter-component></counter-component>
	<counter-component></counter-component>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Moon.component("counter-component",{
  template: "<div>
  <p>Count: {{count}}</p>
  <button m-on:click="increment">Increment</button>
  </div>",
  data: function(){
    return {
      count: 0
    }
  },
  methods: {
    increment: function(){
      this.set("count",this.get("count")+1);
    }
  }
});

const app3 = new Moon({
  el: "#app3"
});

Try the counter!

Parent/Child Communication

Moon，类似于Vue和React，允许 父节点子节点组件通过一个简单的概念:props down,events up进行通信。

对于子节点通信到父节点，你可以使用props.但是如何让父节点知道子节点的活动呢？对于这个问题，我们可以用时间系统。当事件在一个实例中被局部定义，Moon允许子节点发出父节点可以监听的事件，通过使用

m-on当创建一个组件的时候。

使用类似m-on:eventName="parentMethod"可以调用父节点中的方法当一个子节点的事件被发出。

下面是两个局部子节点给父节点加一的例子

1
2
3
4
5
6
7
8
9

<div id="app4">
	<h5>Total Count: {{total}}</h5>
	
	<counter-child-component m-on:increment="incrementTotal">
	</counter-child-component>
	
	<counter-child-component m-on:increment="incrementTotal">
	</counter-child-component>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Moon.component("counter-child-component",{
  template: "<div>
  <p>Count: {{count}}</p>
  <button m-on:click="increment">Increment</button>
  </div>",
  data: function(){
  	return {
      count: 0
  	}
  },
  methods:{
  increment: function(){
    this.set("count",this.get("count")+1);
    this.emit("increment");
    }
  }
});

const app4 = new Moon({
  el: "#app4",
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function(){
      this.set("total",this.get("total")+1);
    }
  }
});

如你所见，每一个子节点计数器都会发出一个increment事件，父节点通过使用在组件元素中使用m-on来监听。

Slots

当你的组件需要分布被传递给他的内容时，使用 props 往往会让他变得混乱不堪。相反，你可以提供一个带有HTML的组件，这样组件就可以相应分布被传递给他的内容。

Moon拥有叫做 slots来达成目标。一个组件模板可以在任何地方拥有带有name选项属性的slot元素。当一个新的组件实例被创建，它里面的内容就被分布好。没有slot属性的元素会被按照默认slot放置，拥有slot属性的元素会被按照相应slot放置。

1
2
3
4
5
6

<div id="app10">
	<slot-component>
		<h1>Default Slot Conntent. Parent data: {{parentMsg}}</h1>
		<p slot="paragraph">Named Slot content.</p>
	</slot-component>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Moon.component("slot-component",{
  template: "<div>
  <slot></slot>
  <h5>Component Content.</h5>
  <slot name="paragraph"></slot>
  </div>"
});

const app5 = new Moon({
  el: "app5",
  data: {
    parentMsg: "Parent Data"
  }
});

试着输入app10.set("parentMsg","New Parent Dat");观察组件更新。

Any question please contact 1-riverfish