Vue2.x中修改父组件数据的.sync替换为Vue3.x的@update
2.x语法
父组件
<!-- 标准写法: -->
<ChildComponent :title="pageTitle" @change="pageTitle = $event" />
<!-- 是以下的简写: -->
<ChildComponent :title.sync="pageTitle" />
export default {
data() {
return {
pageTitle: 'pageTitle'
}
}
}
子组件
通过this.$emit('update:title')修改父组件的数据
export default {
props: {
title: {
type: String
}
},
methods: {
changeCLick() {
this.$emit('update:title', newValue)
}
}
}
3.x语法
父组件
主要是使用@update进行数据修改
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
<script lang="ts" setup>
import { ref } from 'vue'
import ChildComponent from './components/ChildComponent.vue'
const pageTitle = ref<string>()
</script>
子组件
通过defineEmits修改父组件的数据
<script lang="ts" setup>
defineProps<{title: string}>()
const emit = defineEmits<{
(e: 'update:title', value: string): void
}>()
/** 改变数据 */
const changeTitle = () => emit('update:title', 'childTitle')
</script>
