詳解vue中父子參數(shù)傳遞雙向的方式不同
更新時間:2025年06月03日 08:30:43 作者:胡斌附體
本文主要介紹了詳解vue中父子參數(shù)傳遞雙向的方式不同,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
在面試中被問到。平時也有用到,但是缺少總結
- 父傳子。父頁面會給子頁面中定義的props屬性傳參,子頁面接收
- 子傳父。父頁面需要監(jiān)聽事件來接收子頁面通過$emit發(fā)送的消息
- 其實說的以上兩種都是組件之間傳遞。還可以通過路由傳參, 狀態(tài)管理器的方式傳遞
下面是子傳父
<!-- 子組件 --> <template> <button @click="sendMessage">Send Message</button> </template> <script> export default { methods: { sendMessage() { this.$emit('messageSent', 'Hello from child!'); } } }; </script> <!-- 父組件 --> <template> <div> <ChildComponent @messageSent="handleMessage" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleMessage(message) { console.log(message); // 'Hello from child!' } } }; </script>
這里是父傳子
<!-- 父組件 --> <template> <div> <ChildComponent :message="parentMessage" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent!' }; } }; </script> <!-- 子組件 --> <template> <div> {{ message }} </div> </template> <script> export default { props: ['message'] }; </script>
到此這篇關于詳解vue中父子參數(shù)傳遞雙向的方式不同的文章就介紹到這了,更多相關vue 父子參數(shù)傳遞雙向 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue中Class和Style實現(xiàn)v-bind綁定的幾種用法
項目開發(fā)中給元素添加/刪除 class 是非常常見的行為之一, 例如網(wǎng)站導航都會給選中項添加一個 active 類用來區(qū)別選與未選中的樣式,那么在 vue 中 我們?nèi)绾翁幚磉@類的效果呢?下面我們就一起來了解一下2021-05-05Vue項目中使用better-scroll實現(xiàn)一個輪播圖自動播放功能
better-scroll是一個非常非常強大的第三方庫 在移動端利用這個庫 不僅可以實現(xiàn)一個非常類似原生ScrollView的效果 也可以實現(xiàn)一個輪播圖的效果。這篇文章主要介紹了Vue項目中使用better-scroll實現(xiàn)一個輪播圖,需要的朋友可以參考下2018-12-12Vue3+ElementPlus el-date-picker設置可選時間范圍的示例代碼
在Vue3中使用Element Plus的el-date-picker組件設置可選時間范圍,你可以使用disabled-date屬性,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-07-07