溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要總結Vue關于組件化開發知識點，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
全局組件注冊
Vue.component('first-component', {
data: function () {
return {
count: 0
}
},
template: '<button @click="count++">{{ count }}</button>'
})data 必須是一個函數
組件模板內容必須是單個根元素
組件模板內容可以是模板字符串
全局組件可以嵌套全局組件
組件命名方式
Vue.component('first-component', {/* .... */})
// 普通標簽模板中不能使用駝峰, 只能在template中使用駝峰方式
Vue.component('firstComponent', {/* .... */})局部組件注冊
局部注冊的組件只能在父組件中使用 ;
var vm = new Vue({
components: {
'hello-world': {
data: function () {
return {
msg: 'hello world'
}
},
template: '<div>{{ msg }}</div>'
}
}
})props 傳遞數據原則 : 單向數據流
組件內部通過 props 接收傳遞過來的值
Vue.component('son-com', {
props: ['msg', 'parentMsg']
template: '<div>{{msg + "---" + parentMsg}}</div>'
})父組件通過屬性將值傳遞給子組件
<son-com msg="父組件的值" :parent-msg="bind綁定的父組件的值"></son-com>
props 屬性名規則
props 傳遞類型
<div id="app"> <son-com :str="pstr" :num="pnum" <!-- 注意如果不用 v-bind 則獲取不到準確的屬性值 --> :boolean="pboolean" :arr="parr" :obj="pobj" > </son-com> </div>
Vue.component('son-com', {
props: ['str', 'num', 'boolean', 'arr', 'obj'],
template: `
<div>
<div>{{ str }}</div>
<div>{{ num }}</div>
<div>{{ boolean }}</div>
<ul>
<li :key="index" v-for="(item, index) in arr">{{ item }}</li>
</ul>
<div>
<span>{{ obj.name }}</span>
<span>{{ obj.age }}</span>
</div>
</div>
`
})var vm = new Vue({
el: '#app',
data: {
pstr: 'hello Vue',
pnum: 12,
pboolean: true,
parr: ['apple', 'banner', 'orange'],
pobj: {name: 'zs', age: 22}
}
})子組件向父組件傳值
子組件通過自定義事件向父組件傳值 $emit()
Vue.component('son-com', {
template: `
<div>
<button @click="$emit('parent')">點擊放大父組件字體</button>
傳值從第二個參數開始
<button @click="$emit('parent', 10)">點擊放大父組件字體</button>
</div>
`
})父組件監聽子組件事件
<div id="app"> <div>父組件</div> <son-com @parent="handle"></son-com> <!-- 接收值為固定 $event--> <son-com @parent="handle($event)"></son-com> </div>
var vm = new Vue({
el: '#app',
data: {
font: 10
},
methods: {
handle: function (val) {
this.font += 5
this.font += val // 此時的val就是 子組件傳遞過來的值
}
},
})非父子組件傳值
單獨的事件中心管理組件之間的通信
// 創建事件中心
var hub = new Vue()
// 在 mounted 中監聽事件
hub.$on('eventName', fn)
hub.$off('eventName') // 銷毀事件
// 在 methods 中處理事件
hub.$emit('eventName', param)組件插槽
<tmp-com> <!-- 只能匹配一個標簽 --> <p slot="header">程序錯誤</p> <div>我是沒有匹配的內容</div> <!-- 可以匹配多個標簽 --> <template slot="footer"> <p>匹配頁腳一次</p> <p>匹配頁腳兩次</p> </template> </tmp-com>
Vue.component('tmp-com', {
template: `
<div>
<header>
<slot name="header"></slot>
</header>
<div>
如果上面沒有匹配到對應的標簽就會展示默認內容
<slot></slot>
</div>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
})看完上述內容，是不是對總結Vue關于組件化開發知識點有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
