前端学习——VUE组件基础

一 基本示例

1.1 基本使用

    <div id="components-demo">
        <button-counter></button-counter>
    </div>

        Vue.component('button-counter', {
   
            data: function () {
   
                return {
   
                    count: 0
                }
            },
            template: '<button v-on:click="count++">You clicked me {
   { count }} times.</button>'
        });

        new Vue({
    el: '#components-demo' })

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

1.2 基础复用

1.2.1 复用方式

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

1.2.2 组件data必须为函数

注意观察自定义组件的代码，会发现data并不是之前VUE实例中的对象，而是一个函数。

        Vue.component('button-counter', {
   
            data: function () {
   
                return {
   
                    count: 0
                }
            },
            template: '<button v-on:click="count++">You clicked me {
   { count }} times.</button>'
        });

这是为了组件的每个实例都可以单独维护一个返回对象，就像1.2.1中那样，否则效果如下：

二 组件的组织与注册

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：
详情参考

Vue.component('my-component-name'