Vue.js 组件化

2021-03-30 13:14:55 浏览数 (2508)

在这个组织复杂界面问题中,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 组件化 的全部内容。