vue 子组件中直接修改父组件传递过来的值

vue2 中常用的子组件改变父组件的值

• 子组件中用$emit向父组件中发射一个自定义事件，然后在父组件的methods中定义这个方法，方法体中做数据处理。

父组件：

<template>
  <Children :count="count" @changeCount="addCount" />
</template>
<script lang="ts">
import Children from './components/Children.vue'
export default {
  components: {
    Children
  },
  data () {
    return {
      count: 0
    }
  },
  methods: {
    addCount(params) {    
      this.count += params
    }
  }
}
</script>

子组件：

<template>
  <h1>{{ count }}</h1>
  <button @click="addCount">点击改变父组件的值</button>
</template>

<script lang="ts">
export default {
  props: {
    count: Number
  },
  methods: {
    // 通过方法请求给父组件传值
    addCount() {
      this.$emit('changeCount', 1)
    }
  }
}
</script>

• 也可用.sync修饰符直接在子组件中对父组件传递过来的值进行更新。
  父组件：

<template>
  <div id="app">
    <Children :count.sync="count" />
  </div>
</template>

<script>
import Children from './components/Children.vue'

export default {
  components: {
    Children
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

子组件：

<template>
  <div class="hello">
    <h1>{{ count }}</h1>
    <button @click="addCount">点击改变父组件的值</button>
  </div>
</template>

<script>
export default {
  props: {
    count: Number
  },
  methods: {
    addCount() {
      this.$emit('update:count', this.count + 1)
    }
  }
}
</script>

vue3 中常用的子组件改变父组件的值 

• 在vue3中通过v-model的形式使用sync
  父组件：

<template>
  <Children v-model:count="count" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Children from './components/Children.vue'
const count = ref<number>(0)
</script>

子组件：

<template>
  <h1>{{ count }}</h1>
  <button @click="addCount">点击改变父组件的值</button>
</template>
<script setup lang="ts">
import { ref, defineProps, reactive, onMounted, watch } from 'vue'
const props = defineProps({
    count: {
        type: Number,
        required: true,
    },
})
const emit = defineEmits(['update:count'])
const addCount:() => void = () => {
  emit('update:count', props.count + 1)
}
</script>