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>
