快捷導(dǎo)航

詳解vue中父子參數(shù)傳遞雙向的方式不同

更新時(shí)間：2025年06月03日 08:30:43 作者：胡斌附體

本文主要介紹了詳解vue中父子參數(shù)傳遞雙向的方式不同,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在面試中被問(wèn)到。平時(shí)也有用到，但是缺少總結(jié)

父?jìng)髯印?strong>父頁(yè)面會(huì)給子頁(yè)面中定義的props屬性傳參，子頁(yè)面接收
子傳父。父頁(yè)面需要監(jiān)聽(tīng)事件來(lái)接收子頁(yè)面通過(guò)$emit發(fā)送的消息
其實(shí)說(shuō)的以上兩種都是組件之間傳遞。還可以通過(guò)路由傳參, 狀態(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>

這里是父?jìng)髯?/p>

<!-- 父組件 -->
<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>

到此這篇關(guān)于詳解vue中父子參數(shù)傳遞雙向的方式不同的文章就介紹到這了,更多相關(guān)vue 父子參數(shù)傳遞雙向內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue中Class和Style實(shí)現(xiàn)v-bind綁定的幾種用法
項(xiàng)目開(kāi)發(fā)中給元素添加/刪除 class 是非常常見(jiàn)的行為之一，例如網(wǎng)站導(dǎo)航都會(huì)給選中項(xiàng)添加一個(gè) active 類用來(lái)區(qū)別選與未選中的樣式，那么在 vue 中我們?nèi)绾翁幚磉@類的效果呢？下面我們就一起來(lái)了解一下
2021-05-05
關(guān)于Vue中的計(jì)算屬性和監(jiān)聽(tīng)屬性詳解
這篇文章主要介紹了關(guān)于Vue中的計(jì)算屬性和監(jiān)聽(tīng)屬性詳解,Vue.js模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的，在模板內(nèi)放入過(guò)長(zhǎng)的或復(fù)雜的邏輯時(shí)，會(huì)讓模板過(guò)重且難以維護(hù),需要的朋友可以參考下
2023-05-05
Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖自動(dòng)播放功能
better-scroll是一個(gè)非常非常強(qiáng)大的第三方庫(kù) 在移動(dòng)端利用這個(gè)庫(kù) 不僅可以實(shí)現(xiàn)一個(gè)非常類似原生ScrollView的效果也可以實(shí)現(xiàn)一個(gè)輪播圖的效果。這篇文章主要介紹了Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖,需要的朋友可以參考下
2018-12-12
Nuxt使用Vuex的方法示例
這篇文章主要介紹了Nuxt使用Vuex的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Vue3+ElementPlus el-date-picker設(shè)置可選時(shí)間范圍的示例代碼
在Vue3中使用Element Plus的el-date-picker組件設(shè)置可選時(shí)間范圍，你可以使用disabled-date屬性，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2023-07-07
vue第三方庫(kù)中存在擴(kuò)展運(yùn)算符報(bào)錯(cuò)問(wèn)題的解決方案
這篇文章主要介紹了vue第三方庫(kù)中存在擴(kuò)展運(yùn)算符報(bào)錯(cuò)問(wèn)題,本文給大家分享解決方案，通過(guò)結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-07-07
Vue.js?中的父子組件通信方式實(shí)例教程
在 Vue.js 中，父子組件通信是非常重要的，在本文中，我們討論了 Vue.js 中父子組件通信的幾種方式，包括使用 props 傳遞數(shù)據(jù)、使用 Sync 修飾符實(shí)現(xiàn)雙向綁定、使用自定義事件傳遞數(shù)據(jù)、使用 $refs 訪問(wèn)子組件實(shí)例以及使用 $children 和 $parent 訪問(wèn)父子組件實(shí)例
2023-09-09
Vue3配置axios跨域?qū)崿F(xiàn)過(guò)程解析
這篇文章主要介紹了Vue3配置axios跨域?qū)崿F(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11
vue 使用v-for進(jìn)行循環(huán)的實(shí)例代碼詳解
這篇文章主要介紹了vue 使用v-for進(jìn)行循環(huán)的實(shí)例代碼詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-02-02
淺談Vue 性能優(yōu)化之深挖數(shù)組
這篇文章主要介紹了淺談Vue 性能優(yōu)化之深挖數(shù)組，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12