vue實(shí)現(xiàn)組件之間傳值功能示例
更新時(shí)間：2018年07月13日 14:42:56 作者：哼著自己的小調(diào)調(diào)
這篇文章主要介紹了vue實(shí)現(xiàn)組件之間傳值功能,結(jié)合實(shí)例形式分析了vue.js父子組件之間相互傳值常見操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue實(shí)現(xiàn)組件之間傳值功能。分享給大家供大家參考，具體如下：
slot標(biāo)簽：
想向封裝好結(jié)構(gòu)的組件中插入內(nèi)容，需要借助<slot></slot>
在組件之中進(jìn)行關(guān)聯(lián)：如
模板中：
<slot name='txt'></slot>
組件調(diào)用中：
<p slot='txt'></p>
注：如果只有slot上面每一定義name屬性，則只能有一個(gè)slot
<div class='box'>
<com>
<p slot='txt'></p>
</com>
</div>
<template id="c">
<div>
<slot name="txt"></slot>
</div>
</template>
Vue.component('com',{
template:"#c"
})
父組件向子組件傳值：props
父組件：
<template> <child :parent-msg='a'></child> </template>
子組件：
child：{
template：'#chi'
props：['parentMsg']
}
子組件向父組件的傳值：
vue只運(yùn)行數(shù)據(jù)的單選傳遞，在子組件向父組件的傳值中，需要事件觸發(fā)
子組件：
<template> <div @click="up"></div> </template>
methods:{
up(){
this.$emit('fn','msg') // 主動(dòng)觸發(fā)fn方法，msg是需要傳遞的數(shù)據(jù)
}
}
父組件：
<div> <child @fn="getval"></child> </div>
methods:{
getval(msg){ // msg接收到的數(shù)據(jù)
this.msg=msg
}
}
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了Vue3中如何自定義雙向綁定問題,具有很好的參考價(jià)價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例
這篇文章主要介紹了vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
vue+elementui實(shí)現(xiàn)選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3項(xiàng)目啟動(dòng)自動(dòng)打開瀏覽器以及server配置過程
這篇文章主要介紹了vue3項(xiàng)目啟動(dòng)自動(dòng)打開瀏覽器以及server配置過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇關(guān)于vue表單提交防雙/多擊的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue3中的ref為何要用.value進(jìn)行值的調(diào)用呢
這篇文章主要介紹了Vue3中的ref為何要用.value進(jìn)行值的調(diào)用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue axios 在頁面切換時(shí)中斷請(qǐng)求方法 ajax
下面小編就為大家分享一篇vue axios 在頁面切換時(shí)中斷請(qǐng)求方法 ajax，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue?Proxy數(shù)據(jù)代理進(jìn)行校驗(yàn)部分源碼實(shí)例解析
Proxy提供了強(qiáng)大的Javascript元編程,有許多功能,包括運(yùn)算符重載,對(duì)象模擬,簡(jiǎn)潔而靈活的API創(chuàng)建,對(duì)象變化事件,甚至Vue 3背后的內(nèi)部響應(yīng)系統(tǒng)提供動(dòng)力,這篇文章主要給大家介紹了關(guān)于vue?Proxy數(shù)據(jù)代理進(jìn)行校驗(yàn)部分源碼解析的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁欄效果，分頁欄設(shè)計(jì)的步驟與實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
Vue實(shí)現(xiàn)tab導(dǎo)航欄并支持左右滑動(dòng)功能
本文給大家介紹利用Vue實(shí)現(xiàn)tab導(dǎo)航欄，并且通過flex布局實(shí)現(xiàn)左右滑動(dòng)效果，通過代碼給大家分享tab導(dǎo)航欄布局的實(shí)現(xiàn)，本文給大家展示了完整代碼，需要的朋友參考下吧2021-06-06