<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<my-cpn></my-cpn>
<div>
<my-cpn></my-cpn>
</div>
<!-- <mycpn></mycpn> 这个会用不了,局部组件只能在特定的vue实例下实现 -->
</div>
<div id="app1">
<mycpn></mycpn>
</div>
<!-- <my-cpn></my-cpn> 这样没效果,要放到id是vue的实例的属性下面才行 -->
<script src="../vue.js"></script>
<script>
// 1:创建组件构造器对象
const cpnc = Vue.extend({
template:
// '<div><h2>我是标题</h2><p>我是内容</p></div>'
// '<div>'+
// '<h2>我是标题</h2>'+
// '<p>我是内容</p>'+
// '</div>'
`<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>`
})
// 2:注册组件(全局组件 意味着可以在多个vue实例下用)
Vue.component('my-cpn', cpnc)
const cpnc1 = Vue.extend({
template:`
<div>
<h2>我是局部组件标题</h2>
<p>我是局部组件内容</p>
</div>`
})
const app = new Vue({
el: '#app',
data: {
}
})
const app1 = new Vue({
el: '#app1',
data: {
},
// 局部组件
components: {
mycpn: cpnc1
}
})
</script>
</body>
</html>
全局组件和局部组件
最新推荐文章于 2024-07-25 09:35:22 发布