vue里面v-bind和Props 利用props綁定動(dòng)態(tài)數(shù)據(jù)的方法
更新時(shí)間：2018年08月27日 11:08:54 作者：開發(fā)小盆友
今天小編就為大家分享一篇vue里面v-bind和Props 利用props綁定動(dòng)態(tài)數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
如下所示：
<add v-bind:子組件的值="父組件的屬性"></add>
<div id="app">
<add v-bind:btn="h"></add>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn：{{btn}}</button>",
data: function () {
return {'btn': "123"}; //子組件同名的值被覆蓋了
}
}
}
});
</script>
說(shuō)明：
【1】btn使用的父組件data中 h的值；
【2】子組件的data的函數(shù)中返回值被覆蓋了。
【3】也就是說(shuō)，使用v-bind的是使用父組件的值（根據(jù)屬性名），沒(méi)有使用v-bind的是將標(biāo)簽里的數(shù)值當(dāng)做字符串來(lái)使用。
【4】依然需要使用props，否則他會(huì)取用自己data里的btn的值
以上這篇vue里面v-bind和Props 利用props綁定動(dòng)態(tài)數(shù)據(jù)的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue-cli3打包dist路徑問(wèn)題修改打包配置
這篇文章主要介紹了使用vue-cli3打包dist路徑問(wèn)題修改打包配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue性能優(yōu)化之cdn引入vue-Router的問(wèn)題
這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3使用router,params傳參為空問(wèn)題
這篇文章主要介紹了Vue3使用router,params傳參為空問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要給大家整理了在Vue開發(fā)中整合axios要用到的文件，在vue開發(fā)中，不可避免要整合axios，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-04-04
vue3+TS 實(shí)現(xiàn)自定義指令長(zhǎng)按觸發(fā)綁定的函數(shù)
這篇文章主要介紹了vue3+TS實(shí)現(xiàn)自定義指令長(zhǎng)按觸發(fā)綁定的函數(shù),文中給大家分享了編寫自定義指令時(shí)遇到的幾個(gè)難點(diǎn)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
詳解vue2.0 使用動(dòng)態(tài)組件實(shí)現(xiàn) Tab 標(biāo)簽頁(yè)切換效果（vue-cli）
本篇文章主要介紹了詳解vue2.0 使用動(dòng)態(tài)組件實(shí)現(xiàn) Tab 標(biāo)簽頁(yè)切換效果（vue-cli），具有一定的參考價(jià)值，有需要的可以了解下2017-08-08
下面小編就為大家分享一篇vue里面父組件修改子組件樣式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能
這篇文章主要介紹了使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能,功能就是當(dāng)我們點(diǎn)擊復(fù)制按鈕時(shí)，會(huì)提示“復(fù)制成功”，這樣復(fù)制的內(nèi)容就可以在其他地方使用了，感興趣的朋友可以學(xué)習(xí)一下2023-04-04
vue實(shí)現(xiàn)自定義el-table穿梭框功能
這篇文章主要介紹了vue實(shí)現(xiàn)自定義el-table穿梭框功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
基于ElementUI實(shí)現(xiàn)v-tooltip指令的示例代碼
文本溢出隱藏并使用tooltip 提示的需求,相信在平時(shí)的開發(fā)中會(huì)經(jīng)常遇到,常規(guī)做法一般是使用 elementui 的 el-tooltip 組件,在每次組件更新的時(shí)候去獲取元素的寬度/高度判斷是否被隱藏,本文給大家介紹了基于ElementUI實(shí)現(xiàn)v-tooltip指令,需要的朋友可以參考下2024-09-09