Vue2.0 【第二季】第6节 Component 初识组件

第6节 Component 初识组件

前言（废话）：component组件是Vue学习的重点！所以你必须学好Vue component。其实组件就是制作自定义的标签，这些标签在HTML中是没有的。比如：<da0sy></da0sy>，那我们就开始学习这种技巧吧。

一、全局化注册组件

全局化就是在构造器的外部用Vue.component来注册，我们注册一个da0sy组件来体验一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>component-1</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
    <body>
        <h1>component-1</h1>
        <hr>
        <div id="app">
            <da0sy></da0sy>  //必须放在vue作用域里，这里是app
        </div>

        <script type="text/javascript">
            Vue.component('da0sy',{   ////只能定义一个
                template:'<div style="color:red">我是全局的da0sy组件</div>'
            })
            var app = new Vue({
                el:'#app',
            })
        </script>
    </body>
</html>

浏览器效果：

我们在javascript里注册了一个组件，在HTML中调用了它。这就是最简单的一个组件的编写方法，并且它可以放到多个构造器的作用域里。

二、局部注册组件局部

局部注册组件和全局注册组件是相对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>component-1</title>
</head>
<body>
    <h1>component-1</h1>
    <hr>
    <div id="app">
      <monkey></monkey>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            components:{   //可以定义多个
                "monkey":{   //这块必须是字符串，不然相当于没定义
                    template:`<div style="color:green;">局部注册的monkey标签</div>`
                }
            }
        })
    </script>
</body>
</html>

浏览器效果：

从代码中你可以看出局部注册其实就是写在构造器里，但是你需要注意的是，,构造器里的components 是加s的，而全局注册是不加s的。

三、组件和指令的区别

组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。