vue里面v-bind和Props 利用props綁定動態(tài)數(shù)據(jù)的方法
更新時間：2018年08月27日 11:08:54 作者：開發(fā)小盆友
今天小編就為大家分享一篇vue里面v-bind和Props 利用props綁定動態(tài)數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<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>
說明：
【1】btn使用的父組件data中 h的值；
【2】子組件的data的函數(shù)中返回值被覆蓋了。
【3】也就是說，使用v-bind的是使用父組件的值（根據(jù)屬性名），沒有使用v-bind的是將標(biāo)簽里的數(shù)值當(dāng)做字符串來使用。
【4】依然需要使用props，否則他會取用自己data里的btn的值
以上這篇vue里面v-bind和Props 利用props綁定動態(tài)數(shù)據(jù)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中點擊active并第一個默認選中功能的實現(xiàn)
這篇文章主要介紹了Vue中點擊active并第一個默認選中功能的實現(xiàn)代碼，代碼簡單易懂，非常不錯具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了從0搭建Vue3組件庫之如何使用Vite打包組件庫,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vue中keep-alive內(nèi)置組件緩存的實例代碼
這篇文章主要介紹了vue中的keep-alive內(nèi)置組件緩存，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題
這篇文章主要介紹了解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
本文主要介紹了Element中使用ECharts的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Element中Upload組件上傳功能實現(xiàn)(圖片和文件的默認上傳及自定義上傳)
這篇文章主要介紹了Element中Upload組件上傳功能實現(xiàn)包括圖片和文件的默認上傳及自定義上傳,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了vue2.x數(shù)組劫持原理的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了關(guān)于vite proxy跨域問題的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法
這篇文章主要介紹了tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法,需要的朋友可以參考下2006-06-06
基于vue+face-api.js實現(xiàn)前端人臉識別功能
基于face-api.js要實現(xiàn)人臉識別功能,首先要將自己需要的模型文件下載保存在靜態(tài)目錄下,可以通過cdn的方式在index.html中引入face-api.js,本文給大家介紹vue+face-api.js實現(xiàn)前端人臉識別功能,感興趣的朋友一起看看吧2023-12-12