注册组件的基本步骤:
组件使用分成三个步骤:
一.创建组件构造器 Vue.extend()
二.注册组件 Vue.component()
三.使用组件
当我们通过调用Vue.component()注册组件时,组件的注册是全局的
如果我们注册的组件是挂载在某个实例中,那么就是一个局部组件
注册全局组件写法:
<body>
<!-- 步骤三.使用组件 -->
<div id="app">
<cpn></cpn>
</div>
<script>
//步骤一.调用Vue.extend()创建组件构造器
const myapp=Vue.extend({
template:`
<div>
<h2>组件标题</h2>
<p>我是组件中的一个段落内容</p>
</div>
`
});
// 步骤二.Vue.component()注册组件,并且定义组件标签的名称
//传两个参数:1.注册组件的标签名 2.组件构造器
Vue.component('cpn',myapp)
let app= new Vue({
el:"#app"
})
</script>
</body>
注册局部组件的写法:
<body>
<!-- 组件必须挂载在某个Vue实例下,否则不会生效 -->
<div id="test">
<allcpn></allcpn>
</div>
<script>
//注册的组件是挂载在某个实例中,那么就是一个局部组件
const allapp=Vue.extend({
template:`
<div>
<h2>局部组件标题</h2>
<p>局部组件方法</p>
</div>
`
});
let test1=new Vue({
el:"#test",
components:{
'allcpn':allapp
}
})
</script>
</body>