Vue07_组件化01-初识Vue.component

一、全局（组件）注册

1. 直接通过Vue.component（）定义

完整代码：

<div id="app">
    <!--在创建的Vue根实例中，把这个组件作为自定义元素来使用组件-->
    <counter></counter>
</div>
<script>
    Vue.component("counter", {
        data: function () {
            return { count: 0 }
        },
        template:
            '<button @click="count++">{{ count }} times</button>'
    })
    new Vue({
        el: '#app',
        data: {
        
        }
    })
</script>

• P.S. 数据属性data 必须是一个返回值的函数

2. 外围定义template标签再通过id引用

3. 组件的复用

可以将组件进行任意次数的复用：

效果：

二、局部（组件）注册

1. 区别

• 作用域不同，局部组件只能在该实例挂载的元素内使用
• 写法不同：
  
• 上面讲的只是声明注册，没有内容展示不出东西。在组件中添加 template 属性即可：

效果：

• 调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。
• 如果不需要全局注册，可以用选项对象的components属性实现局部注册
• 局部组件component要加s

2. 其他（常用）写法

• 最常用写法：var变量，再引用到Vue实例中的component属性
• 好处：该变量可引用到任意实例中，且代码易读，Vue实例中不会太乱

• 在html中添加标签（标签名可任意定义），好处如下：

1. 有代码提示功能
2. 其他方式必须要有一个父标签，同级标签不显示，而这个方式可以