vue.js父子組件傳參的原理與實(shí)現(xiàn)方法 原創(chuàng)
在Vue中，父子組件之間的數(shù)據(jù)傳遞常常會(huì)使用props進(jìn)行實(shí)現(xiàn)。具體原理是，當(dāng)一個(gè)父組件嵌套了一個(gè)子組件時(shí)，在子組件內(nèi)部使用props接收從父組件傳遞過(guò)來(lái)的數(shù)據(jù)，這些數(shù)據(jù)可以是基礎(chǔ)類型如字符串、數(shù)字等，也可以是對(duì)象或者數(shù)組等復(fù)雜類型。
下面展示一個(gè)例子，通過(guò)一個(gè)簡(jiǎn)單的計(jì)數(shù)器組件Counter.vue，演示如何在父組件App.vue中傳值到子組件Counter.vue并更新計(jì)數(shù)器操作：
子組件：
<!-- Counter.vue -->
<template>
? <div class="counter">
? ? <h4>{{ title }}</h4>
? ? <p>當(dāng)前計(jì)數(shù)：{{ count }}</p>
? ? <button @click="addCount">+1</button>
? ? <button @click="reduceCount">-1</button>
? </div>
</template>
<script>
export default {
? name: "Counter",
? props: {
? ? title: {
? ? ? type: String,
? ? ? required: true,
? ? },
? ? count: {
? ? ? type: Number,
? ? ? required: true,
? ? },
? },
? methods: {
? ? // 添加計(jì)數(shù)
? ? addCount() {
? ? ? this.$emit("add-count");
? ? },
? ? // 減少計(jì)數(shù)
? ? reduceCount() {
? ? ? this.$emit("reduce-count");
? ? },
? },
};
</script>父組件：
<!-- App.vue -->
<template>
? <div class="container">
? ? <h2>計(jì)數(shù)器應(yīng)用</h2>
? ? <hr />
? ? <!-- 父組件傳遞計(jì)數(shù)器標(biāo)題和當(dāng)前計(jì)數(shù)給子組件 -->
? ? <Counter :title="title" :count="count" @add-count="handleAddCount" @reduce-count="handleReduceCount" />
? </div>
</template>
<script>
import Counter from "./components/Counter.vue";
export default {
? name: "App",
? components: {
? ? Counter,
? },
? data() {
? ? return {
? ? ? title: "計(jì)數(shù)器",
? ? ? count: 0,
? ? };
? },
? methods: {
? ? // 添加計(jì)數(shù)
? ? handleAddCount() {
? ? ? this.count++;
? ? },
? ? // 減少計(jì)數(shù)
? ? handleReduceCount() {
? ? ? this.count--;
? ? },
? },
};
</script>在上述示例中，傳遞數(shù)據(jù)的方式是通過(guò)在父組件中使用v-bind指令將數(shù)據(jù)綁定到子組件的props屬性上，并在子組件內(nèi)部訪問(wèn)props接收數(shù)據(jù)。同時(shí)，在子組件內(nèi)部定義了兩個(gè)方法addCount和reduceCount，用于觸發(fā)自定義事件，從而向父組件emit事件。
最后需要注意的是，父子組件之間的數(shù)據(jù)流是單向的，即數(shù)據(jù)只能從父組件流向子組件，不能反過(guò)來(lái)。如果子組件想要修改數(shù)據(jù)，必須通過(guò)emit事件來(lái)通知父組件進(jìn)行相應(yīng)的操作。
相關(guān)文章
vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個(gè)函數(shù)在某段時(shí)間內(nèi),無(wú)論觸發(fā)了多少次回調(diào),都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復(fù)執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下2024-01-01
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。接下來(lái)通過(guò)本文給大家介紹Vuejs第十二篇之動(dòng)態(tài)組件，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09
Vant的Tabbar標(biāo)簽欄引入自定義圖標(biāo)方式
這篇文章主要介紹了Vant的Tabbar標(biāo)簽欄引入自定義圖標(biāo)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vuex管理狀態(tài) 刷新頁(yè)面保持不被清空的解決方案
今天小編就為大家分享一篇vuex管理狀態(tài) 刷新頁(yè)面保持不被清空的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了ElementUI radio組件選中小改造，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue項(xiàng)目打包解決靜態(tài)資源無(wú)法加載和路由加載無(wú)效(404)問(wèn)題
這篇文章主要介紹了vue項(xiàng)目打包，解決靜態(tài)資源無(wú)法加載和路由加載無(wú)效(404)問(wèn)題,靜態(tài)資源無(wú)法使用，那就說(shuō)明項(xiàng)目打包后，圖片和其他靜態(tài)資源文件相對(duì)路徑不對(duì),本文給大家介紹的非常詳細(xì)，需要的朋友跟隨小編一起看看吧2023-10-10
Vue引用vee-validate插件表單驗(yàn)證問(wèn)題(cdn方式引用)
這篇文章主要介紹了Vue引用vee-validate插件表單驗(yàn)證問(wèn)題(cdn方式引用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
詳解10分鐘學(xué)會(huì)vue滾動(dòng)行為
本篇文章主要介紹了vue滾動(dòng)行為，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式實(shí)例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式,使用原生js實(shí)現(xiàn)拖拽，VUe使用js實(shí)現(xiàn)拖拽穿梭框，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了在vue里添加好看的lottie動(dòng)畫效果的方法，在vue中引入lottie非常簡(jiǎn)單,需要的朋友可以參考下2018-08-08