Vue組件創(chuàng)建和傳值的方法
## 創(chuàng)建組件的3種方法
# 第一種:
+ Vue.extend()函數(shù)返回一個組件的構造器,里面包含一個參數(shù),參數(shù)是對象,對象里面是一些配置項
+ Vue.component()函數(shù)利用Vue.extend()返回的構造器創(chuàng)建一個組件的實例,有兩個參數(shù).;
參數(shù)1:組件名字,參數(shù)2:組件構造器
注意:
模板template中只能有一個根節(jié)點
組建的名字采用駝峰命名的話,使用時,就要加上"-"; 例如:組件名字indexA-->index-a;
## 第二種:
+ Vue.component('indexB',{模板})
## 第三種:
+ 通過制定模板創(chuàng)建,在Vue管轄范圍之外定義模板
## 總結:
+ 先制造一個模板,在創(chuàng)建組件
## 組件中使用指令:
+ 在Vue.component()里邊,有template模板,有data()函數(shù),有methods()方法
+ 注意:data()必須是一個個函數(shù).不能使用屬性定義;函數(shù)里邊return出去一個對象
## 父組件傳值給子組件的方法
* 先創(chuàng)建好父組件和子組件
* 在父組件的模板中的son,子組件標簽里綁定 :屬性 = 父組件需要傳遞的數(shù)據(jù);
* 在子組件的son{}中 使用props來接收父組件傳遞過來的數(shù)據(jù);
* props后跟一個數(shù)組,數(shù)組中是一個個字符串,這些字符串可以當成屬性使用,即props:['屬性名']
* 代碼如下:
*
Vue.component('father',{
template:'<div>....<son :myName="mySonName"></son></div>',
data(){
return{
mySonName:'小明'
}
},
//子組件
components:{
son:{
props:['myName'],
template:'...{{myName}}'
}
}
})
## 子組件傳值給父組件的方法
* 先創(chuàng)建好父組件和子組件;
* 在子組件methods方法中使用this.$emit()方法,
* 這個方法有兩個參數(shù);參數(shù)1:需要與父組件交換事件名稱,參數(shù)2:要傳遞的數(shù)據(jù);
* 在父組件模板的son標簽中使用方法名的傳遞:
即,@tellFatherMyname = "getMySonName";
* 在父組件的methods方法中傳入data參數(shù),這個data=子組件傳遞過來的數(shù)據(jù),然后讓mySonName = data;*
代碼如下:
<div id="app">
<father></father>
</div>
<script>
Vue.component('father',{
template:`<div>
<p>我的兒子告訴我他叫{{mySonName}}</p>
<son @tellFatherMyname="getMySonName"></son>
</div>`,
data(){
return {
mySonName:'???'
}
},
methods:{
getMySonName(data){
console.log(data);
this.mySonName = data;
}
},
components: {
son:{
data(){
return {
myName :'小明'
}
},
template:`
<button @click = "emitMyname">點擊就告訴父親我叫{{myName}}
</button>`,
//在子組件的methods中使用this.$emit()來傳遞值;
//$emit()有2個參數(shù);參數(shù)1:需要交換的事件名,參數(shù)2:要傳遞的數(shù)據(jù);例
如:this.name
methods:{
emitMyname(){
this.$emit('tellFatherMyname',this.myName)
}
}
}
}
})
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
### 兄弟組件的創(chuàng)建和傳值:
* 創(chuàng)建兄弟組建時,先創(chuàng)建好父組件,然后在子組件中創(chuàng)建son組件 和 daughter組件;
* 接下來是 son組件 和daughter組件之間傳值;
* dau --> son傳值
* 在dau中 先通過事件總線發(fā)射一個事件名稱和要傳遞的數(shù)據(jù);即eventbus.$emit('事件名稱','數(shù)據(jù)')
* 事件總線:
var eventbus = new Vue();
* 在 son 中先寫一個鉤子函數(shù),再通過eventbus.$on('事件名稱',data=>{})方法去監(jiān)聽,接收兄弟節(jié)點發(fā)射過來的事件
* $on()有兩個參數(shù),參數(shù)1:事件名稱;參數(shù)2:函數(shù),函數(shù)的默認值是傳遞過來的數(shù)據(jù)* 代碼如下:
*
<div id="app">
<!-- 在此處渲染到頁面上 -->
<father></father>
</div>
<script>
//先創(chuàng)建一個vue空實例,作為事件總線
var eventbus = new Vue();
Vue.component('father',{
//組件顯示的模板
template:`<div>
<son></son>
<daughter></daughter>
</div>`,
components: {
son:{
data(){
return {
mySisterName:'???'
}
},
//組件顯示的模板
template:'<p>我的妹妹告訴我她叫{{mySisterName}}</p>',
//采用鉤子函數(shù)
//在鉤子函數(shù)中通過eventbus.$on('同一個事件名稱',data)來接收傳遞過來的數(shù)據(jù)
mounted(){
eventbus.$on('tellBroMyName',data=>{
this.mySisterName = data;
})
}
},
daughter:{
data(){
return {
myName:'蘭蘭'
}
},
template:'<button @click="emitMyName">點擊就告訴哥哥我叫{{myName}}</button>',
methods:{
//只要點擊按鈕,就將事件和數(shù)據(jù)一起傳遞過去
emitMyName(){
eventbus.$emit('tellBroMyName',this.myName)
}
}
}
}
})
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
總結
以上所述是小編給大家介紹的Vue組件創(chuàng)建和傳值的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
Vue實現(xiàn)鼠標經(jīng)過文字顯示懸浮框效果的示例代碼
這篇文章主要介紹了Vue實現(xiàn)鼠標經(jīng)過文字顯示懸浮框效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
vue+elementUI實現(xiàn)右擊指定表格列的單元格顯示選擇框功能
這篇文章主要介紹了vue+elementUI實現(xiàn)右擊指定表格列的單元格顯示選擇框功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
Vue.2.0.5實現(xiàn)Class 與 Style 綁定的實例
本篇文章主要介紹了Vue.2.0.5實現(xiàn)Class 與 Style 綁定的實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了vuex mutations 同步操作方法,需要的朋友可以參考下2023-10-10
本文主要介紹了Vue實現(xiàn)動態(tài)路由導航的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
vue配置electron使用electron-builder進行打包的操作方法
這篇文章主要介紹了vue配置electron使用electron-builder進行打包的操作方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
解決elementUI 切換tab后 el_table 固定列下方多了一條線問題
這篇文章主要介紹了解決elementUI 切換tab后 el_table 固定列下方多了一條線問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue數(shù)據(jù)雙向綁定原理及簡單實現(xiàn)方法
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式來實現(xiàn)的.本文重點給大家介紹Vue數(shù)據(jù)雙向綁定原理及簡單實現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
這篇文章主要介紹了Vue的混合繼承，有需要的朋友可以借鑒參考下，希望能夠有所幫助，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了Vue-CLI與Vuex使用方法,結合實例形式分析了Vue-CLI創(chuàng)建項目與Vuex相關概念、使用方法及操作注意事項,需要的朋友可以參考下2020-01-01