溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這兩天學習了Vue.js 感覺組件這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記。
首先Vue組件的使用有3個步驟，創建組件構造器，注冊組件，使用組件3個方面。
代碼演示如下：
<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- 3. #app是Vue實例掛載的元素，應該在掛載元素范圍內使用組件-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.創建一個組件構造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
// 2.注冊組件，并指定組件的標簽，組件的HTML標簽為<my-component>
Vue.component('my-component', myComponent)
new Vue({
el: '#app'
});
</script>
</html>
2.理解組件的創建和注冊
我們用以下幾個步驟來理解組件的創建和注冊：
1. Vue.extend()是Vue構造器的擴展，調用Vue.extend()創建的是一個組件構造器，而不是一個具體的組件實例。
2. Vue.extend()構造器有一個選項對象，選項對象的template屬性用于定義組件要渲染的HTML。
3. 使用Vue.component()注冊組件時，需要提供2個參數，第1個參數時組件的標簽，第2個參數是組件構造器。
4. Vue.component()方法內部會調用組件構造器，創建一個組件實例。
5. 組件應該掛載到某個Vue實例下，否則它不會生效。
請注意第5點，以下代碼在3個地方使用了<my-component>標簽，但只有#app1和#app2下的<my-component>標簽才起到作用。
<!DOCTYPE html>
<html>
<body>
<div id="app1">
<my-component></my-component>
</div>
<div id="app2">
<my-component></my-component>
</div>
<!--該組件不會被渲染-->
<my-component></my-component>
</body>
<script src="js/vue.js"></script>
<script>
var myComponent = Vue.extend({
template: '<div>This is a component!</div>'
})
Vue.component('my-component', myComponent)
var app1 = new Vue({
el: '#app1'
});
var app2 = new Vue({
el: '#app2'
})
</script>
</html>
全局注冊和局部注冊
調用Vue.component()注冊組件時，組件的注冊是全局的，這意味著該組件可以在任意Vue示例下使用。
如果不需要全局注冊，或者是讓組件使用在其它組件內，可以用選項對象的components屬性實現局部注冊。
上面的示例可以改為局部注冊的方式：
<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- 3. my-component只能在#app下使用-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.創建一個組件構造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
new Vue({
el: '#app',
components: {
// 2. 將myComponent組件注冊到Vue實例下
'my-component' : myComponent
}
});
</script>
</html>
由于my-component組件是注冊在#app元素對應的Vue實例下的，所以它不能在其它Vue實例下使用。
<div id="app2">
<!-- 不能使用my-component組件，因為my-component是一個局部組件，它屬于#app-->
<my-component></my-component>
</div>
<script>
new Vue({
el: '#app2'
});
</script>
如果你這樣做了，瀏覽器會提示一個錯誤。
//注冊組件(全局 component)
Vue.component("my-component",{
template:'<div>這是一個全局組件測試 </div>'
});
new Vue({
el:"#app5"
})
//(局部components)
new Vue({
el:"#app6",
components:{
'test-component':{
template:"<div>這是一個局部的組件測試</div>"
}
}
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
