Component 初识组件

　　组件作为vue学习中的重点之一，其强大的功能在vue编程中随处可见，组件就是制作自定义的标签。

全局化注册组件

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

<!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">
        <xiaofan></xiaofan>
    </div>
 
    <script type="text/javascript">
        //注册全局组件
        Vue.component('xiaofan',{
            template:`<div style="color:red;">全局化注册的jspang标签</div>`
        })
        var app=new Vue({
            el:'#app',
            data:{
            }
        })
    </script>
</body>
</html>

　　我们在js中利用Vue.component(自定义标签名，对象(可以跟一个模版template))，然后在HTML中使用这个组件<xiaofan></xiaofan>

局部注册组件

　　正如其命名方式，局部注册组件，也就是在一个内部自定义的组件，只能在内部使用，所以其有作用域，超出了这个作用域也就无法使用。<!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">
        <xiaofan></xiaofan>
    </div>
 
    <script type="text/javascript">

var app=new Vue({
            el:'#app',
　　　　　　　components:{
　　　　　　　　"xiaofan":{
　　　　　　　　　　template:` <div style = "color:red;">局部注册组件</div>`
　　　　　　　　}
　　　　　　　}

        })
    </script>
</body>
</html>

　　注意：我们是在app内部写的组件xiaofan，所以其只能在html中的app中使用，并且主要内部写组件或者其他，命名方式基本都加s，外部则不加，同时template后面的不是单引号，而是`也就是tab键上面的符号。

Vue2.0 的漫长学习ing-2-6

Component 初识组件

全局化注册组件

局部注册组件

猜你喜欢