Vue 使用Props屬性實(shí)現(xiàn)父子組件的動(dòng)態(tài)傳值詳解
更新時(shí)間：2019年11月13日 15:17:53 作者：kaleid_liner
今天小編就為大家分享一篇Vue 使用Props屬性實(shí)現(xiàn)父子組件的動(dòng)態(tài)傳值詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
如下所示：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="prop-example-2">
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
<script>
Vue.component('child',{
props:['myMessage'],
template:'<span>{{ myMessage }}</span>'
})
new Vue({
el:'#prop-example-2',
data:{
parentMsg:'Messsssssssssssss'
}
})
</script>
</body>
</html>
這里需要注意的是在html中的 my-message 就是scrpit中的 myMessage。因?yàn)椋?/p>
HTML 特性是不區(qū)分大小寫(xiě)的。所以，當(dāng)使用的不是字符串模板時(shí)，camelCase (駝峰式命名) 的 prop 需要轉(zhuǎn)換為相對(duì)應(yīng)的 kebab-case (短橫線(xiàn)分隔式命名)
以上這篇Vue 使用Props屬性實(shí)現(xiàn)父子組件的動(dòng)態(tài)傳值詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案
這篇文章主要介紹了詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
解決vue-cli@3.xx安裝不成功的問(wèn)題及搭建ts-vue項(xiàng)目
這篇文章主要介紹了解決vue-cli@3.xx安裝不成功的問(wèn)題及搭建ts-vue項(xiàng)目.文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue 項(xiàng)目軟鍵盤(pán)回車(chē)觸發(fā)搜索事件
這篇文章主要介紹了vue 項(xiàng)目軟鍵盤(pán)回車(chē)觸發(fā)搜索事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue.js計(jì)算屬性computed用法實(shí)例分析
這篇文章主要介紹了vue.js計(jì)算屬性computed用法,結(jié)合實(shí)例形式分析了vue.js使用computed方式進(jìn)行屬性計(jì)算的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue中methods、mounted等的使用方法解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue-cli創(chuàng)建的項(xiàng)目,配置多頁(yè)面的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue-cli創(chuàng)建的項(xiàng)目,配置多頁(yè)面的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue3?組件與API直接使用的方法詳解(無(wú)需import)
這篇文章主要介紹了vue3?組件與API直接使用的方法(無(wú)需import)，主要包括vue3自動(dòng)導(dǎo)入和API的自動(dòng)引入問(wèn)題，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09
vue3+vue-router+vite實(shí)現(xiàn)動(dòng)態(tài)路由的全過(guò)程
動(dòng)態(tài)路由是根據(jù)不同情況實(shí)時(shí)變化的路由,在權(quán)限管理系統(tǒng)中,動(dòng)態(tài)路由常用于根據(jù)用戶(hù)角色分配不同的菜單和功能,這篇文章主要介紹了vue3+vue-router+vite實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)資料,需要的朋友可以參考下2024-10-10
vue router2.0二級(jí)路由的簡(jiǎn)單使用
這篇文章主要為大家詳細(xì)介紹了vue router2.0二級(jí)路由的簡(jiǎn)單使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue使用directive限制表單輸入整數(shù)、小數(shù)的方法
這篇文章主要介紹了vue使用directive限制表單輸入整數(shù)，小數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04