Vue自定义组件

Vue中自定义组件分为：

　　全局自定义组件：在任意一个通过new关键字创建的vue实例中都可以使用。

　　局部自定义组件：只能在当前实例中使用

　　注意：所有的组件都只能渲染一个根标签，可以在根标签里嵌套内容。

全局自定义组件的具体用法：

　　组件的形式就是以标签的形式来使用，相当于自定义一个标签

<div id="app">
    <test-component></test-component>
</div>

　　需要在Vue的原型中的方法定义一个自定义的组件（标签）

　　语法：Vue.component("自定义组件名（也可以叫自定义标签名）",{

　　template:``, //自定义组件内容（模板）

})

Vue.component("test-component",{
   template:`<div>这是自定义的一个标签</div>` 
})
 var vm = new Vue({
   el:"#qpp",
   data:{
    }  

})

注意：组件中的内容参数在组件自己内部，不在Vue实例中

参数以函数的返回值的形式来表示的，返回的是一个对象

Vue.component('test-component',{   //组件的信息
            data(){  
                return {
                    msg : "test"
                }
            },
            template : `
                <div>
                    <div>全局</div>
                    <p>组件</p>
                    <h1> {{ msg }} </h1>
                </div>
            `
        })

局部自定组件的使用

　　局部自定义组件的使用，语法和全局自定组件相同但是写的位置不同，写在当前Vue实例中，

　　语法：

 components : { 
              组件名称 : {
                    template : `<div>    //组件的自定义模块            
                        <h1>这是一个局部的组件</h1>
                    </div>`
                }
            }

new Vue({
            el : "#app", //模板
            data : {   //所有的数据都在这里
                msg : 'hello world'
            },
            components : {  //自定义组组件,（局部的哟）
                'demo-component' : {
                    template : `<div>                
                        <h1>这是一个局部的组件</h1>
                    </div>`
                }
            }
        })

注意：自定义组件中的数据，也是在自定义组件中定义的data当中，也是以函数返回值得形式表示,也不嗯给你拿Vue实例中的data。

        new Vue({
            el : "#app",
            data : {
                msg : 'hello world'
            },
            components : {
                'demo-component' : {
　　　　　　　　　　　　data:function(){
　　　　　　　　　　　　　　return {
　　　　　　　　　　　　　　msg:"abc",
　　　　　　　　　　　　}
　　　　　　　　　　　　},

                    template : `<div>                
                        <h1>这是一个局部的组件</h1>
                  　　　　<span>{{ msg }}</span>
                    </div>`
                }
            }
        })

组件之间的嵌套

　　全局组件嵌套在局部组件内，全局组件之间的嵌套，嵌套的话就之间嵌套在要嵌套的组件template模板内，因为组件只能渲染一个根标签，所以嵌套的方式就和html中标签的嵌套方式一样，标签中套标签。

　全局组件嵌套在局部组件内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ msg }}
        <hr>
        <!-- 组件的使用，就相当于自定义的标签，组件的名称就可以当成一个自定义的标签 -->
        <li-component></li-component>
        <demo-component></demo-component>
    </div>
    <script>
        // 全局的组件
        Vue.component('test-component',{   //组件的信息
            data(){
                return {
                    msg : "test"
                }
            },
            template : `
                <div>
                    <div>全局</div>
                    <p>组件</p>
                    <h1> {{ msg }} </h1>
                    <li-component></li-component>
                </div>
            `
        })
        Vue.component('li-component',{
            template : "<li>test - li - 01</li>"
        })
        new Vue({
            el : "#app",
            data : {
                msg : 'hello world'
            },
            components : {
                'demo-component' : {  //这是一个局部组件
                    template : `<div>                
                        <h1>这是一个局部的组件</h1>
                        <test-component></test-component> //这是一个全局组件
                        <li-component></li-component> //这也是一个全局组件
                    </div>`
                }
            }
        })
    </script>
</body>
</html>

全局组件之间的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <demo-component></demo-component> //这是第一个全局自定义组件标签
    </div>
    <script>
        // 全局的组件
        Vue.component('test-component',{   //这是第一个全局组件
            data(){
                return {
                    msg : "test"
                }
            },
            template : `
                <div>
                    <div>全局</div>
                    <p>组件</p>
                    <h1> {{ msg }} </h1>
                    <li-component></li-component> //这是第二个全局组件标签
                </div>
            `
        })
        Vue.component('li-component',{//这是第二个全局组件
            template : "<li>test - li - 01</li>"
        })
        new Vue({
            el : "#app",
        })
    </script>
</body>
</html>