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指令会产生临时作用域