创建组件的三个步骤
一:调用 const cpn=vue.extend()创建组件构造器
二:注册组件vue.component('cpn',cpn)
组件注册分为两种 即 全局组件和局部组件
我们常用的组件注册方式为局部组件
三:使用组件<cpn></cpn>
<div id="app1">
<!--3.使用组件 组件必须在vue挂载的实例下使用-->
<cpn1></cpn1><!--全局组件 能展示-->
<cpn2></cpn2><!--局部组件 能在app1实例中展示-->
</div>
<div id="app2">
<!--3.使用组件 组件必须在vue挂载的实例下使用-->
<cpn1></cpn1><!--全局组件 能展示-->
<cpn2></cpn2><!--局部组件 不能在app2实例中展示-->
</div>
<div>
<!--这样是出不来效果的-->
<cpn></cpn>
</div>
<script>
// 1.创建组件构造器
const cpn1 = vue.extend({
template:`<div>
<h2>标题1</h2>
<p>内容1</p>
</div>`
});
const cpn2 = vue.extend({
template:`<div>
<h2>标题2</h2>
<p>内容2</p>
</div>`
});
//2.注册组件 这是全局注册方式
vue.component('cpn1',cpn1);
const app1 = new Vue({
el:"#app1",
components:{
cpn2:cpn2
}
});
const app2 = new Vue({
el:"#app2",
});
</script>
当然vue2x之后还提供了组件注册的语法糖
<div id="app">
<cpn1></cpn1><!--全局组件-->
<cpn2></cpn2><!--局部组件-->
</div>
<script>
//2.构造注册一步到位
vue.component('cpn1',{
template:`<div>
<h2>标题1</h2>
<p>内容1</p>
</div>`
});
const app = new Vue({
el:"#app",
components:{
'cpn2':{
template:`<div>
<h2>标题2</h2>
<p>内容2</p>
</div>`
}
}
});
</script>
HTML代码和js代码写到一起是十分不友好的一种写法
因此有两种模板分离写法
第一种是script标签 类型为text/x-template
第二种template
<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
</div>
<!--使用script标签-->
<script type="text/x-template" id="cpn1">
<div>
<h2>标题1</h2>
<p>内容1</p>
</div>`
</script>
<!--使用template标签-->
<template id="cpn2">
<div>
<h2>标题2</h2>
<p>内容2</p>
</div>
<template/>
<script>
const app = new Vue({
el:"#app",
components:{
'cpn1':{
template:'#cpn1'
},
'cpn2':{
template:'#cpn2'
},
}
});
</script>
附上vue 小破站学习链接