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>