定义全局组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<cpn></cpn>
</div>
<script>
//1.创建组件构造器
const cpnC = Vue.extend({
template:
`<div>
<h2>我是标题</h2>
<p>我是内容,甲方的罚款</p>
</div>`
})
// 2.注册组件(全局组件,意味着可以在多个Vue的实例下面使用)
Vue.component('cpn',cpnC)
const app = new Vue({
el:'#app',
data:{
message:'你好啊'
}
})
</script>
</body>
</html>
注意:
①全局组件中template里面的内容一定要用 ``引起来(且 `为Esc下面的键英文状态下的,而不是普通的‘’)
②要使用全局组件,必须在Vue实例下面
定义局部组件
在Vue实例中引用的组件是局部组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<cpn></cpn>
</div>
<script>
//1.创建组件构造器
const cpnC = Vue.extend({
template:
`<div>
<h2>我是标题</h2>
<p>我是内容,甲方的罚款</p>
</div>`
})
const app = new Vue({
el:'#app',
data:{
message:'你好啊'
},
components:{
//cpn为使用组件时的标签名
cpn:cpnC
}
})
//
</script>
</body>
</html>