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