溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關vue組件需要注意什么事項，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
vue組件要注意的事項：1、組件的template模板必須有且只有一個根節點；2、組件的data選項必須是一個函數，且函數體返回一個對象；3、子組件不能直接修改父組件傳遞過來的值，否則會有一個警告。
本教程操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
組件可以理解為特殊的 Vue 實例，管理自己的 template 模板。
組件的 template 必須有且只有一個根節點。
組件的 data 選項必須是一個函數，且函數體返回一個對象。
子組件不能直接修改父組件傳遞過來的值。
父組件通過屬性的形勢可以隨意給子組件傳遞值，但子組件不能修改父組件的數據； 否則會有一個警告，提示不要直接修改父組件傳遞過來的值。
組件與組件之間是相互獨立的，可以配置自己的一些選項資源 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選項必須是一個函數
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>關于“vue組件需要注意什么事項”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
