詳解vue父子組件間傳值(props)
更新時(shí)間：2017年06月29日 10:03:32 作者：ygtq
本篇文章主要介紹了詳解vue父子組件間傳值(props)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
先定義一個(gè)子組件，在組件中注冊(cè)props
<template>
<div>
<div>{{message}}(子組件)</div>
</div>
</template>
<script>
export default {
props: {
message: String //定義傳值的類型<br> }
}
</script>
<style>
</style>
在父組件中，引入子組件，并傳入子組件內(nèi)需要的值
<template>
<div>
<div>父組件</div>
<child :message="parentMsg"></child>
</div>
</template>
<script>
import child from './child' //引入child組件
export default {
data() {
return {
parentMsg: 'a message from parent' //在data中定義需要傳入的值
}
},
components: {
child
}
}
</script>
<style>
</style>
這種方式只能由父向子傳遞，子組件不能更新父組件內(nèi)的data
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue子組件調(diào)用父組件事件的3種方法實(shí)例
大家在做vue開(kāi)發(fā)過(guò)程中經(jīng)常遇到父組件需要調(diào)用子組件方法或者子組件需要調(diào)用父組件的方法的情況,這篇文章主要給大家介紹了關(guān)于Vue子組件調(diào)用父組件事件的3種方法,需要的朋友可以參考下2024-01-01
vue created鉤子函數(shù)與mounted鉤子函數(shù)的用法區(qū)別
這篇文章主要介紹了vue created鉤子函數(shù)與mounted鉤子函數(shù)的用法區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
本文是作者通過(guò)實(shí)際項(xiàng)目的優(yōu)化實(shí)踐進(jìn)行總結(jié)而來(lái)，希望讀者讀完本文，有一定的啟發(fā)思考，從而對(duì)自己的項(xiàng)目進(jìn)行優(yōu)化起到幫助2022-08-08
Vue中$on和$emit的實(shí)現(xiàn)原理分析
這篇文章主要介紹了Vue中$on和$emit的實(shí)現(xiàn)原理分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue init失敗的簡(jiǎn)單解決方法-終極版,需要的朋友可以參考下2017-12-12
本篇文章給大家分享了vue添加刪除元素的方法以及相關(guān)實(shí)例代碼，有興趣的朋友參考一下。2018-06-06
vue+antv實(shí)現(xiàn)雷達(dá)圖的示例代碼
這篇文章主要介紹了vue+antv實(shí)現(xiàn)雷達(dá)圖，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
前端vue3手動(dòng)設(shè)置滾動(dòng)條位置/自動(dòng)定位詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于前端vue3手動(dòng)設(shè)置滾動(dòng)條位置/自動(dòng)定位的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)學(xué)習(xí)或者使用vue3具有一定的參考解決價(jià)值,需要的朋友可以參考下2024-05-05
Vue數(shù)據(jù)更新頁(yè)面卻沒(méi)有更新的幾種情況以及解決方法
我們?cè)陂_(kāi)發(fā)過(guò)程中會(huì)碰到數(shù)據(jù)更新,但是頁(yè)面卻沒(méi)有更新的情況,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)更新頁(yè)面卻沒(méi)有更新的幾種情況以及解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue-router跳轉(zhuǎn)和location.href的區(qū)別及說(shuō)明
Vue?Router是Vue.js官方的路由管理器,它允許我們通過(guò)定義路由來(lái)管理應(yīng)用程序的不同視圖和狀態(tài),Vue路由跳轉(zhuǎn)主要有以下幾種方式：<router-link>標(biāo)簽、this.$router.push方法、this.$router.replace方法和this.$router.go方法2025-01-01