vue.js组件数据流的示例分析-创新互联

Vue.component('pop-box', {
  template:  '\
    \
    ..........
    

利用 Vue.component 方法我们可以很轻松的创建一个全局可用的组件，当然也可以在实例或组件内部注册局部组件，但原理大同小异。Vue.component 的第一个参数是组件的名字，或者说唯一标识符（id），后续调用它将通过这个名字进行调用；第二个参数是一个对象，通常它包含了模板（template）、组件内维护的数据（data、computed）、方法（methods）、钩子函数（created 、 mounted...）等关键信息。

值得注意的是：

1. 组件内的 data 必须是一个函数，它的返回值将作为实际的 “data”；

2. vue1.x 和 vue2.x 的钩子函数略有不同，如果发现钩子函数不生效，记得确认 vue 的版本。

（二）组件调用

（1）开始标签 + 结束标签模式

（2）无结束标签模式

调用 vue 组件有以上两种模式。两种模式上，如果没有使用 slot 那么实际上并没有任何区别，但如果需要使用 slot 的时候，便只能使用同时包含开始标签和结束标签的模式。

值得注意的是，上面绑定数据的时候，直接采用 property="value" 的形式，不管 value 是数字还是字符串，property 最终都是字符串类型。如果想让其变成数字类型，请使用 v-bind:property="value" 的形式，或者简写为 :property="value" 。

三、vue 组件数据流

vue 遵循了典型的单向数据流的原则，即数据总是由父组件传递到子组件，子组件在其内部可以有自己维护的数据，但它无权修改父组件传递给它的数据，当开发者尝试这样做的时候，vue 将会报错。这样做的好处是，防止多个子组件都尝试修改父组件状态时，让这一行为变得难以追溯。vue 中具体实现方式如下：

父组件通过绑定 props 的方式，将数据传递给子组件，但是子组件自己并没有权利修改这些数据，如果要修改，只能把修改这一个行为通过 event 的方式报告给父组件，由父组件本身决定改如何处理数据。

（一）简单实例