Cpage.js组件之间事件传播

本文主要讲解Cpage.js组件之间事件传播的方法。

传送门：demo

在开发过程中，不同组件之间交互是常有的事情，而实现的方法有多种，可以通过props属性传值，也可以通过pub,sub事件订阅的方式。Cpage.js组件可以通过props传值，并且自带事件传播机制。

首先，需要一个用于渲染组件的节点

<div id="app"></div>

然后引入js

<script type="text/javascript" src="../../cpage/1.0.3/Cpage-1.0.3.min.js"></script>

现在开始开发组件！

第一步，注册组件并将其渲染到节点。

首先注册一个hello组件

var hello = Cpage.component({    name: 'hello',    template: `        <div>            <h1>组件之间事件传播</h1>        </div>    `,    handelClick(){    },    render(){    }});

再注册一个根组件。

var myApp = Cpage.component({    name: 'myApp',    components: [hello],    template: `        <hello></hello>    `,    render(){        this.$event.listen('hello-event', function(msg){            alert(msg)        });    }});

将组件渲染到dom节点，需要用到函数bootstrap

Cpage.bootstrap("#app", myApp);

刷新页面，让我们看下展示效果

现在，给元素绑定点击事件，在函数体内触发事件。

这里需要用到Cpage.js内置的$event属性 。this.$event.trigger(事件名, 信息);

var hello = Cpage.component({    name: 'hello',    template: `        <div>            <h1 c-click="handelClick()">组件之间事件传播</h1>        </div>    `,    handelClick(){        this.$event.trigger('hello-event', 'helloMsg');    },    render(){    }});

这时候点击元素是无效的，需要在其他组件内监听事件传播，可以在根组件的render()方法里面处理。this.$event.listen(“事件名”, “回调函数”)。此时回调函数的参数即为trigger()函数传递的值。

var myApp = Cpage.component({    name: 'myApp',    components: [hello],    template: `        <hello></hello>    `,    render(){        this.$event.listen('hello-event', function(msg){            alert(msg)        });    }});

点击元素，会看到一下结果

基本的处理方式已经掌握，现在我们来做一个交互效果：点击hello组件，改变其父组件的内容。
更新根组件的template模板

template: `    <hello></hello>    <div>{{text}}</div>`,

在data属性里添加数据

data: {    text: 'render...'},

效果如下：

最后要做的是点击元素后修改text属性的值，

用到Cpage.js内置的$data方法，this.$data("属性", "值")

var self = this;this.$event.listen('hello-event', function(msg){    self.$data('text', 'changed...');});

此时点击元素，看到text属性值已经改变