vue組件學(xué)習(xí)教程
更新時間：2017年09月09日 13:40:35 作者：lychiyu
這篇文章主要為大家詳細(xì)介紹了vue組件學(xué)習(xí)教程，根據(jù)Vue官方文檔學(xué)習(xí)的筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在學(xué)習(xí)vue時，組件學(xué)習(xí)比較吃力，尤其是組件間的通信，所以總結(jié)一下，官方文檔的組件部分。
注冊組件
全局組件
語法如下，組件模板需要使用一個根標(biāo)簽包裹起來。data必須是一個方法
Vue.component('component-name',{
template:'<div><h1>標(biāo)題</h1><span>作者信息</span></div>',
data(){
return{
message:'組件的屬性'
}
},
methods:{
}
})
局部組件
var com = {
template:'<div><h1>標(biāo)題</h1><span>作者信息</span></div>',
data(){
return{
message:'組件的屬性'
}
},
methods:{
}
}
new Vue({
components:{
'compontent-name':com
}
})
組件通信
prop將父組件數(shù)據(jù)傳給子組件
<div id='app'> <child :msg=message></child> </div>
<script>
Vue.component('child', {
props: ['msg'],
template: '<p>{{msg}}</p>'
})
new Vue({
el: '#app',
data: {
message: '父組件數(shù)據(jù)'
}
})
</script>
利用子組件的props選項，父組件可以向子組件傳遞數(shù)據(jù)，但是子組件不能求改父組件的數(shù)據(jù)。
非父子組件通信
需要使用一個空的Vue實例來管理
<div id='app'> <com-a></com-a> <com-b></com-b> </div>
var bus = new Vue();
var coma = {
template: '<p @click="send">{{adata}}</p>',
data(){
return {
adata: 'a的數(shù)據(jù)'
}
},
methods:{
send(){
// 觸發(fā)這一事件
bus.$emit('data-to-b', this.adata);
}
}
};
var comb= {
template: '<p>{{bdata}}</p>',
data(){
return {
bdata: 'b的數(shù)據(jù)'
}
},
mounted(){
// 監(jiān)聽事件，獲取a組件的數(shù)據(jù)，進(jìn)行相關(guān)操作
bus.$on('data-to-b', function (msg) {
this.bdata = msg;
}.bind(this));
}
};
new Vue({
el:'#app',
components: {
'com-a': coma,
'com-b': comb
}
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue的一個強(qiáng)大功能就是組件化開發(fā),下面這篇文章主要給大家介紹了關(guān)于vue引入組件的幾種方法,文中給出了詳細(xì)的代碼及圖文介紹,需要的朋友可以參考下2024-04-04
本文主要介紹了Vue3封裝登錄功能的兩種實現(xiàn)，文中根據(jù)實例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本篇文章主要介紹了詳解使用vue腳手架工具搭建vue-webpack項目，非常具有實用價值，需要的朋友可以參考下2017-05-05
Vue中watch與watchEffect的區(qū)別詳細(xì)解讀
這篇文章主要介紹了Vue中watch與watchEffect的區(qū)別詳細(xì)解讀,watch函數(shù)與watchEffect函數(shù)都是監(jiān)聽器，在寫法和用法上有一定區(qū)別，是同一功能的兩種不同形態(tài)，底層都是一樣的,需要的朋友可以參考下2023-11-11
Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示
這篇文章主要介紹了Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
本文主要介紹了vue中對token有效期的深入理解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了Vue.native如何將原生事件綁定到組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
$router.push()中通過path跳轉(zhuǎn)和通過name跳轉(zhuǎn)區(qū)別解析
今天在路由跳轉(zhuǎn)傳參時發(fā)現(xiàn)params傳參接收到的總是為空，才發(fā)現(xiàn)通過path和name傳參是有區(qū)別的，這篇文章主要介紹了$router.push()中通過path跳轉(zhuǎn)和通過name跳轉(zhuǎn)有什么區(qū)別,需要的朋友可以參考下2023-11-11
Vue無法訪問.env.development定義的變量值問題及解決
這篇文章主要介紹了Vue無法訪問.env.development定義的變量值問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了封裝一個Vue文件上傳組件案例詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08