您好,登錄后才能下訂單哦!
這兩天學習了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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。