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. 其他方式必须要有一个父标签，同级标签不显示，而这个方式可以