您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)vue組件需要注意什么事項,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
vue組件要注意的事項:1、組件的template模板必須有且只有一個根節(jié)點;2、組件的data選項必須是一個函數(shù),且函數(shù)體返回一個對象;3、子組件不能直接修改父組件傳遞過來的值,否則會有一個警告。
本教程操作環(huán)境:windows7系統(tǒng)、vue2.9.6版,DELL G3電腦。
組件可以理解為特殊的 Vue 實例,管理自己的 template 模板。
組件的 template 必須有且只有一個根節(jié)點。
組件的 data 選項必須是一個函數(shù),且函數(shù)體返回一個對象。
子組件不能直接修改父組件傳遞過來的值。
父組件通過屬性的形勢可以隨意給子組件傳遞值,但子組件不能修改父組件的數(shù)據(jù); 否則會有一個警告,提示不要直接修改父組件傳遞過來的值。
組件與組件之間是相互獨立的,可以配置自己的一些選項資源 data 、 methods 、 computed 等等。
思想:組件自己管理自己,不影響別人。
組件示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全局注冊 - 王佳偉</title> </head> <body> <div id="app"> <!-- 引用組件時必須使用橫線分割符 --> <component-a></component-a> <component-a></component-a> <component-b></component-b> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> // 全局注冊組件 /*** * 1.組件命名:駝峰、橫線分隔符命名方式 * 2.使用組件:使用組件時必須采用橫線分隔符的方式進行引用 * * 組件可以理解為就是特殊的Vue實例,不需要手動的實例化而已,它用于管理自己的模板。 */ Vue.component('component-a', { // template選項,指定組件的模板代碼 template: '<div><h2>頭部組件 -- {{name}}</h2></div>', data: function () { // 在組件中,data選項必須是一個函數(shù) return { name: '全局組件' } } }) // 定義局部組件對象 const ComponentB = { template: '<div>這是 {{name}} </div>', data() { return { name: '局部組件' } }, } new Vue({ el: '#app', components: { // key:value ; key為組件名,value是組件對象。 'component-b': ComponentB }, data: { } }) </script> </body> </html>
關(guān)于“vue組件需要注意什么事項”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。