Vue 使用Props屬性實現(xiàn)父子組件的動態(tài)傳值詳解
更新時間：2019年11月13日 15:17:53 作者：kaleid_liner
今天小編就為大家分享一篇Vue 使用Props屬性實現(xiàn)父子組件的動態(tà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。因為：
HTML 特性是不區(qū)分大小寫的。所以，當(dāng)使用的不是字符串模板時，camelCase (駝峰式命名) 的 prop 需要轉(zhuǎn)換為相對應(yīng)的 kebab-case (短橫線分隔式命名)
以上這篇Vue 使用Props屬性實現(xiàn)父子組件的動態(tài)傳值詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解使用jest對vue項目進行單元測試，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue中想要mock數(shù)據(jù)在線上環(huán)境生效如何操作
本文主要介紹了在配置了mock數(shù)據(jù)之后在線上環(huán)境使用,主要通過在main.ts文件中注冊和vite.config.ts文件夾中配置插件來實現(xiàn),感興趣的可以了解一下2025-01-01
這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前路由的五種方式,文中通過代碼示例介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-08-08
Vue.js 是一個流行的前端JavaScript框架,用于構(gòu)建用戶界面,在這個"vue網(wǎng)頁登錄界面"的示例中,我們探討的是如何使用Vue.js創(chuàng)建一個簡單的登錄頁面,感興趣的小伙伴跟著小編一起來看看吧2025-04-04
vue.js實現(xiàn)的經(jīng)典計算器/科學(xué)計算器功能示例
這篇文章主要介紹了vue.js實現(xiàn)的經(jīng)典計算器/科學(xué)計算器功能,具有基本四則運算計算器以及科學(xué)計算器的功能,可實現(xiàn)開方、乘方、三角函數(shù)以及公式運算等功能,需要的朋友可以參考下2018-07-07
本篇文章主要介紹了vue服務(wù)端渲染的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要給大家介紹了關(guān)于vue中適配px2rem的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue實現(xiàn)權(quán)限控制路由(vue-router 動態(tài)添加路由)
今天小編就為大家分享一篇vue實現(xiàn)權(quán)限控制路由(vue-router 動態(tài)添加路由)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷圖文詳解
這篇文章主要給大家介紹了關(guān)于vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷的相關(guān)資料,對vue來說index.html是一個總的入口文件,vue是單頁面應(yīng)用,掛在id為app的div下然后動態(tài)渲染路由模板,需要的朋友可以參考下2023-09-09
vue+layui實現(xiàn)select動態(tài)加載后臺數(shù)據(jù)的例子
今天小編就為大家分享一篇vue+layui實現(xiàn)select動態(tài)加載后臺數(shù)據(jù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09