Vue.js 组件化

在这个组织复杂界面问题中，Vue 与 React 可以说非常相同：一切都是组件。我们可以把任何例子做成组件。

var Example = Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  }
})
 
// 将该组件注册为 <example> 标签
Vue.component('example', Example)

通过组件化我们就可以在其他组件模板中使用它：

<example></example>

组件还能套其他组件，最后形成代表 UI视图的树状结构，想要让组件间有效的动态组构，Vue 可以：

• 利用 props 去定义如何接收外部数据以及数据类型
• 利用自定义事件向外部传递消息；
• 利用 <slot> API 来将外部动态传入的内容和自身模板进行组合。

以上就是小编为您带来的 Vue.js 组件化 的全部内容。