6. 组件 -- Highway MVVM

6-1. 自定义

通过Highway.extend抽取为类，需指定标签名

6-1-1. 全局

通过Highway.component指定

6-1-2. 局部

通过View.$components指定

6-1-3. 示例

<!-- examples/components/customized.html -->

<div id="app">
<p>i am {{name}}</p>
<my-component hi-ref="component" class="component"></my-component>
</div>

<script id="t-my-component" type="text/template">
<p>i am {{name}}</p>
</script>

const myComponent = Highway.extend({
$template: $('#t-my-component').html(),
$scope: {
name: 'component'
}
});

// 全局
//Highway.component('my-component', myComponent);

const app = new Highway({
$el: $('#app'),
$scope: {
name: 'app'
},
// 局部
$components: {
'my-component': myComponent
}
});

6-2. 引用

6-2-1. 子视图

父视图通过$refs[‘name’]获取子视图上下文，子视图需指定hi-ref指令

<!-- examples/components/ref.html -->

<div id="app">
<p>i am {{name}}</p>
<my-component hi-ref="component" class="component"></my-component>
<button hi-on:click="getComponentName">getComponentName</button>
<button hi-on:click="triggerComponentHandler">triggerComponentHandler</button>
</div>

<script id="t-my-component" type="text/template">
<p>i am {{name}}, my parent is {{$parent.name}}</p>
</script>

const myComponent = Highway.extend({
$template: $('#t-my-component').html(),
$scope: {
name: 'component'
},
introduce() {
alert('hi, i am component');
}
});

const app = new Highway({
$el: $('#app'),
$scope: {
name: 'app'
},
$components: {
'my-component': myComponent
},
getComponentName() {
const $component = this.$components.$refs['component'];

alert($component.$get('name'));
},
triggerComponentHandler() {
const $component = this.$components.$refs['component'];
$component.introduce();
}
});

6-2-2. 父视图

子视图通过$parent获得父视图上下文

<!-- examples/components/parent.html -->

<div id="app">
<p>i am {{name}}</p>
<my-component class="component"></my-component>
</div>

<script id="t-my-component" type="text/template">
<p>i am {{name}}, my parent is {{$parent.name}}</p>
<button hi-on:click="getParentName">getParentName</button>
<button hi-on:click="triggerParentHandler">triggerParentHandler</button>
</script>

const myComponent = Highway.extend({
$template: $('#t-my-component').html(),
$scope: {
name: 'component'
},
getParentName() {
alert(this.$parent.$get('name'));
},
triggerParentHandler() {
this.$parent.introduce();
}
});

const app = new Highway({
$el: $('#app'),
$scope: {
name: 'app'
},
$components: {
'my-component': myComponent
},
introduce() {
alert('hi, i am app');
}
});

6-3. 通信

6-3-1. $on

监听事件，需指定事件名与处理函数，返回停止监听

<!-- examples/components/event.html -->

this.$on('app:event', this.eventHandler.bind(this));

// stop listening if stopper is called
//stopper()

6-3-2. $off

关闭监听，需指定事件名与处理函数，如处理函数不指定，关闭在该事件上的所有处理器

<!-- examples/components/event.html -->

this.$off('app:event');

6-3-2. $broadcast

广播事件，向子视图发送通知消息

<!-- examples/components/event.html -->

this.$broadcast('app:event', 'this is event from app');

6-3-3. $emit

冒泡事件，向父视图发送通知消息

<!-- examples/components/event.html -->

this.$emit('component:event', 'this is event from component');

6-3-4. $fire

触发自身事件，并不会触发broadcast、emit

<!-- examples/components/event.html -->

this.$fire('component:self', 'this is event from self');

6-3-5. $listenTo

监听指定对象事件，指定对象通过$fire触发事件

<!-- examples/components/listen.html -->

const $component = this.$components.$refs['component'];
const stopper = this.$listenTo($component, 'component:event', this.eventHandler.bind(this));

// stop listening if stopper is called
//stopper()

6-3-6. $listenToOnce

监听一次指定对象事件，指定对象通过$fire触发事件

<!-- examples/components/listen.html -->

const stopper = this.$listenToOnce($component, 'component:event', this.eventHandler.bind(this));

// stop listening if stopper is called
//stopper()

6-3-7. $stopListening

取消监听指定对象事件

<!-- examples/components/listen.html -->

const $component = this.$components.$refs['component'];
this.$stopListening($component, 'component:event');

6-4. 作用域链

视图与子视图作用域(不同于上下文)相互隔离，可通过$parent中获取作用域

<!-- examples/components/scope.html -->

<div id="app">
<p>i am {{name}}</p>
<my-component class="component"></my-component>
</div>

<script id="t-my-component" type="text/template">
<p>i am {{name}}, my parent is {{$parent.name}}</p>
</script>

name属性值只会从当前上下文作用域获取值，如遇空值并不会自动向父组件寻找，如需向上寻找添加$parent前缀。

参考如下name取值

view- child	view-parent	hi, i am {{name}}, my parent is {{$parent.name}}
’ child’	‘parent’	hi, i am child, my parent is parent
undefined	‘parent’	hi, i am , my parent is parent
‘child’	undefined	hi, i am child, my parent is
undefined	undefined	hi, i am , my parent is

repeat指令会产生临时作用域