快捷導(dǎo)航

詳解Vue中子組件修改父組件傳過來的值的三種方式

更新時間：2024年12月12日 11:37:46 作者：陪你去流浪_

這篇文章主要為大家詳細(xì)介紹了Vue中子組件修改父組件傳過來的值的三種方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下

方式1：子組件發(fā)送emit，觸發(fā)父組件修改

父組件

<template>
  <div>
    <son :count="count" @updateCount="updateCount" />
  </div>
</template>

<script>
import son from "./son";
export default {
  data() {
    return {
      count: 0,
    };
  },
  components: { son },
  methods: {
    updateCount(data) {
      this.count = data;
    },
  },
};
</script>

子組件

<template>
  <div class="goodsBasic">
    <div>父組件：{{ count }}</div>
    <el-button @click="changeCount">方式1</el-button>
  </div>
</template>
<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    changeCount() {
      this.$emit("updateCount", this.count + 1);
    },
  },
};
</script>

方式2：在子組件那里強(qiáng)制修改

父組件

<template>
  <div>
    <son :text.sync="text" />
  </div>
</template>

<script>
import son from "./son";
export default {
  data() {
    return {
      text: "hello world",
    };
  },
  components: { son },
};
</script>

子組件

<template>
  <div class="goodsBasic">
    <div>父組件：{{ text }}</div>
    <el-button @click="changeCount">方式2</el-button>
  </div>
</template>
<script>
export default {
  props: {
    text: {
      type: String,
      default: "",
    },
  },
  methods: {
    changeCount() {
      this.$emit("update:text", "我被強(qiáng)制修改了");
    },
  },
};
</script>

方式3：子組件定義一個值，來代替父組件傳過來的值（不推薦，該方法父子組件的值不是同步修改）

父組件

<template>
  <div>
    <son :count="count" />
  </div>
</template>

<script>
import son from "./son";
export default {
  data() {
    return {
      count: 0,
    };
  },
  components: { son },
};
</script>

子組件

<template>
  <div class="goodsBasic">
    <div>子組件：{{ son_count }}</div>
    <el-button @click="changeCount">方式3</el-button>
  </div>
</template>
<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      son_count: this.count,
    };
  },
  methods: {
    changeCount() {
      this.son_count++;
    },
  },
};
</script>

以上就是詳解Vue中子組件修改父組件傳過來的值的三種方式的詳細(xì)內(nèi)容，更多關(guān)于Vue子組件修改父組件傳值的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Vue開發(fā)配置tsconfig.json文件的實(shí)現(xiàn)
tsconfig.json文件中指定了用來編譯這個項(xiàng)目的根文件和編譯選項(xiàng),本文就來介紹一下Vue開發(fā)配置tsconfig.json文件的實(shí)現(xiàn),感興趣的可以了解一下
2023-08-08
vue 解決setTimeOut和setInterval函數(shù)無效報(bào)錯的問題
這篇文章主要介紹了vue 解決setTimeOut和setInterval函數(shù)無效報(bào)錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
在vue3中使用import.meta.env
這篇文章主要介紹了在vue3中使用import.meta.env方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-05-05
使用Vue.js創(chuàng)建一個時間跟蹤的單頁應(yīng)用
這篇文章主要介紹了使用Vue.js創(chuàng)建一個時間跟蹤的單頁應(yīng)用的相關(guān)資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2016-11-11
vue實(shí)現(xiàn)移動端項(xiàng)目多行文本溢出省略
這篇文章主要介紹了vue實(shí)現(xiàn)移動端項(xiàng)目多行文本溢出省略功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue2 如何實(shí)現(xiàn)div contenteditable=“true”(類似于v-model)的效果
這篇文章主要給大家介紹了利用vue2如何實(shí)現(xiàn)div contenteditable="true"，就是類似于v-model的效果，文中給出了兩種解決的思路，對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。
2017-02-02
Vue 項(xiàng)目分環(huán)境打包的方法示例
這篇文章主要介紹了Vue 項(xiàng)目分環(huán)境打包的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
利用vue對比兩組數(shù)據(jù)差異的可視化組件詳解
這篇文章主要給大家介紹了關(guān)于利用vue對比兩組數(shù)據(jù)差異的可視化組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2021-09-09
一文搞明白vue開發(fā)者vite多環(huán)境配置
Vue是一款流行的JavaScript框架,用于開發(fā)動態(tài)單頁應(yīng)用程序,本地安裝和環(huán)境配置是學(xué)習(xí)和使用Vue的第一步,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)者vite多環(huán)境配置的相關(guān)資料,需要的朋友可以參考下
2023-06-06
詳解Vue中狀態(tài)管理Vuex
vuex是一個專門為vue.js設(shè)計(jì)的狀態(tài)管理模式，并且也可以使用devtools進(jìn)行調(diào)試。
2017-05-05