vue3修改父组件的值(update语法)

如果需要修改父组件的值，可以通过自定义事件来修改，这里可以通过update语法糖让子组件修改父组件的值更为的简单

父组件

<template>
    <HelloWorld v-model="msg" />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'
const msg = ref('父组件的值')

</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

 <HelloWorld v-model:message="msg" />
 如果子组件不想使用modelValue接收，可以自己定义个变量，子组件接收的时候需要与定义的变量一直

子组件

<!--
 * @Description: 
 * @Author: pang bo
 * @Date: 2021-06-22 14:45:47
 * @LastEditTime: 2021-06-22 14:48:29
 * @LastEditors: Do not edit
-->
<template>
    <input type="text" v-model="listValue" />
    <button @click="add">添加</button>
    <ul>
        <li v-for="(item,index) in list" :key="index">{{ item }}</li>
    </ul>
    <div>{{ props.modelValue }}</div>
    <button @click="changeMsg">改变</button>
</template>

<script setup>
import { reactive, ref, useContext, watchEffect, watch, onMounted, onUnmounted } from 'vue';
const props = defineProps({
    modelValue: {
        type: String,
        default: "12312"
    },

})
const emit = defineEmit(['update:modelValue'])
const list = reactive([1]);

const listValue = ref('');
const add = () => {
    list.push(listValue.value)
    listValue.value = ''
}
console.log(emit);
const changeMsg = () => {
    emit('update:modelValue', '111')
}

</script>

<style scoped>
a {
    color: #42b983;
}
</style>