Vue學習-元件的基本使用（區域性元件）
阿新 • • 發佈：2020-06-28
目錄
示例程式碼
1.建立元件（構造器物件建立-Vue.extend）
const cpnC=Vue.extend({
template:`
<div>
<h2>我是標題</h2>
<p>這裡是內容</p>
</div>`
})
ES6定義字元器用"`"定義的字串，可以換行
2.註冊元件
//這種是全域性註冊的，在多個vue例項中都可以使用
//Vue.component('my-cpn',cpnC);
//通過components區域性註冊元件
const app=new Vue({
el:"#app",
components:{
myCpn:cpnC //myCpn為標籤名，在html使用時要轉換為my-cpn命名法
},
data:{
}
})
3.使用元件
<div id="app">
<my-cpn></my-cpn>
</div>
4.語法糖建立並註冊元件
//語法糖建立並註冊元件（內部還是呼叫了Vue.extend函式）
Vue.component('my-cpn', {
template: `
<div>
<h2>我是標題</h2>
<p>這裡是內容</p>
</div>
}) //這種為全域性註冊元件
const app = new Vue({
el: "#app",
data: {
message: "我是message"
},
components:{
cnp1:{
template:`
<div>
<h1>區域性註冊</h1>
<p>這裡是語法糖區域性註冊</p>
</div>
`
}
}
})