使用vue3.0时遇到父子传值的问题，顺便记录一下
问题背景：
如图所示，编辑按钮是父组件的部分，下面的表单是子组件
需要：按下父组件中的编辑按钮时，子组件的表单需要变成可编辑状态，在可编辑状态下按下确定按钮后，将子组件的表单变回不可编辑状态
那么我们需要父组件给子组件传一个参数来确定表单编辑状态和一个方法改变父组件的参数值
父组件
<my-information:initialAllowEdit="allowEdit"@submitEdit="submitEdit"/>setup() {const allowEdit = ref(false);const editInformation = () => {allowEdit.value = true;};const submitEdit = () => {allowEdit.value = false;};return {allowEdit,editInformation,submitEdit,};},
子组件
通过computed计算父组件传来的参数，并用emit使用父组件传来的方法改变参数值
<a-buttontype="primary"block@click="submit">确定</a-button>export default defineComponent({name: "myInformation",components: {},props: {initialAllowEdit: {// 是否允许编辑个人资料type: Boolean,default: false,},},setup(props: any, {emit }) {const allowEdit = computed(() => {return props.initialAllowEdit;});const submit = () => {emit("submitEdit");};return {formState,allowEdit,submit,};},});
