vue3.0 父子组件传值问题

使用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,};},
});

vue3.0 父子组件传值问题相关推荐

vue3.0父子组件的通信
vue3.0父子组件的通信 Vue3.0组件通信 Vue3.0组件通信 vue3.0脚手架setup内部的组件通信 1.父到子通过props 父组件 <template><div & ...
Vue3中父子组件传值
vue3父子组件传值其实和vue2写法差不多父传子 Props,子传父 emit 父组件代码 <template><div><child :msg="msg& ...
vue3.0 父子组件通信
子传父:子组件调用父组件方法 vue3.0不再支持this,所以this.$emit()方法不在被支持. 以下为VUE3.0新写法子组件: <script> import { defin ...
vue3：父子组件传值
文章目录 Vue2 父传子子传父 Vue3选项式API 父传子子传父 Vue3组合式API 父传子子传父 Vue2 父传子父组件:  <templat ...
Vue3 学习笔记 —— 父子组件传值、插槽、提供/注入、兄弟组件传值、mitt
目录 1. 父子组件传值 1.1 父组件给子组件传值 -- v-bind 1.2 子组件接收父组件的传值 -- defineProps 1.3 设置子组件接受参数的默认值 -- withDefault ...
Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值
Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我 ...
Vue3在setup语法糖下的父子组件传值
文章目录前言一.前期准备二.初始化项目 1.父组件传值给子组件 2.子组件传值给父组件 3.完整代码总结前言 vue版本大于>3.2 使用setup语法糖一.前期准备 setup介绍 ...
Vue3 父子组件传值 ts
父子组件传值父子组件传值,父组件通过子组件的v-bind定义一个属性将父子的数据传递给子组件,子组件通过defineProps传递纯类型参数的方式来声明,接收父组件传过来的数据.子组件通define ...
Vue3父子组件传值
Vue3父子组件传值父传子: 在父组件中给子组件自定义属性=要穿的值,子组件通过,props接受,然后在setup(props,emit)第一个参数中拿到props实例,props.传过来的自定义属 ...

vue3.0 父子组件传值问题

vue3.0 父子组件传值问题相关推荐

最新文章

热门文章