溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
創建組件的兩種方法小結
1.全局注冊
2.局部注冊
var child=Vue.extend({})
var parent=Vue.extend({})
Vue.extend() 全局方法 生成構造器，創建子類
使用基礎 Vue 構造器，創建一個“子類”。
這樣寫非常繁瑣。于是vue進行了簡化
使用Vue.component()直接創建和注冊組件：
Vue.component(id,options) 全局方法 用來注冊全局組件
id 是string類型，即是注冊組件的名稱
options 是個對象
// 全局注冊，my-component1是標簽名稱
Vue.component('my-component1',{
template: '<div>This is the first component!</div>'
})
var vm1 = new Vue({
el: '#app1'
})
Vue.component()的第1個參數是標簽名稱，第2個參數是一個選項對象，使用選項對象的template屬性定義組件模板。
使用這種方式，Vue在背后會自動地調用Vue.extend()。
在選項對象的components屬性中實現局部注冊：
var vm2 = new Vue({
el: '#app2',
components: {
// 局部注冊，my-component2是標簽名稱
'my-component2': {
template: '<div>This is the second component!</div>'
},
// 局部注冊，my-component3是標簽名稱
'my-component3': {
template: '<div>This is the third component!</div>'
}
}
})
==局部注冊都放在選項對象中創建==
注意：這里是components，里面可以定義多個組件。
簡化后是這樣的寫法
<body>
<div id='box'>
<parent>
</parent>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('parent',{
template:`<div><h2>我是父組件</h2><child></child></div>`,
components:{
'child':{
template:`<h2>我是子組件</h2>`
}
}
})
new Vue({
el:'#box'
})
</script>
</body>
注冊一個parent的父組件。然后在父組件的選項對象中注冊一個child的子組件。將子組件child的標簽寫到父組件parent的template里面。
頁面上的樣式結構就是
<div> <h2>我是父組件</h2> <h2>我是子組件</h2> </div>
注意：用局部注冊的子組件不能單獨直接使用！
標簽掛在div里，會報錯
<div id='box'> <child></child> </div>
結果會報錯。
以上這篇Vue 創建組件的兩種方法小結(必看)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
