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視圖的樹狀結(jié)構(gòu)，想要讓組件間有效的動態(tài)組構(gòu)，Vue 可以：

• 利用 props 去定義如何接收外部數(shù)據(jù)以及數(shù)據(jù)類型
• 利用自定義事件向外部傳遞消息；
• 利用 <slot> API 來將外部動態(tài)傳入的內(nèi)容和自身模板進行組合。

以上就是小編為您帶來的 Vue.js 組件化 的全部內(nèi)容。