Vue.js 組件化

在這個(gè)組織復(fù)雜界面問(wèn)題中，Vue 與 React 可以說(shuō)非常相同：一切都是組件。我們可以把任何例子做成組件。

var Example = Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  }
})
 
// 將該組件注冊(cè)為 <example> 標(biāo)簽
Vue.component('example', Example)

通過(guò)組件化我們就可以在其他組件模板中使用它：

<example></example>

組件還能套其他組件，最后形成代表 UI視圖的樹(shù)狀結(jié)構(gòu)，想要讓組件間有效的動(dòng)態(tài)組構(gòu)，Vue 可以：

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

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