网站建设定制开发【vue3】子组件修改父组件传过来的props数据

前言

网站建设定制开发最近新项目用vue3搭建的，网站建设定制开发准备开始使用vue3的语法，网站建设定制开发从这篇开始记录下vue3遇到的一些问题和一些语法的使用方法，以便于以后复习，也可能帮助到一些小伙伴。

1. 修改父组件普通数据

使用v-mode语法，代替了vue2.x的.修饰符

1. 父组件用ref() 定义一个普通数据为响应式变量，例 var test = ref(‘parent’)
2. 父组件用v-mode将数据绑定到子组件上

   <ChildComponent v-model:test="test" />
1

其实它是以下的简写：

<ChildComponent :test="test" @update:test="test = $event" />
1

3. 子组件
   子组件使用emit修改父组件数据

//ChildComponent    props: {    test:String     //接收父组件数据  },  emits: ['update:test'],      //定义组件可触发的事件  setup(props,ctx){    function onClick() {      ctx.emit('update:test','child')    }  }
1
2
3
4
5
6
7
8
9
10

2. 修改父组件复杂数据（对象）

在vue2.x中，子组件虽然不能修改父组件传过来的普通数据，但是可以直接操作复杂数据，但是vue3不行。目前我只能用类似vue2的语法来解决修改父组件对象数据的问题，如有哪位大佬有更好的办法，还希望评论区指教！！！

1. 父组件reactive定义一个对象为响应式数据，并绑定到子组件上，例如

<ChildComponent :obj="obj" @update:obj="updateObj" />const obj = reactive({  key: 'test'})
1
2
3
4
5

2. 父组件定义一个修改数据的方法

function updateObj(params){  obj.key = params}return{  updateObj}
1
2
3
4
5
6

3. 子组件emit定义一个可触发的事件

//ChildComponent    props: {    obj:Object     //接收父组件数据  },  emits: ['update:obj'],      //定义组件可触发的事件  setup(props,ctx){    function onClick() {      ctx.emit('update:obj','child')    }  }
1
2
3
4
5
6
7
8
9
10

最后

我试过用第一种修改普通数据的方式修改父组件对象，但是发现没有效果，好像是reactive定义的响应式数据，用v-绑定后就被覆盖成普通对象了，不知道是不是，望vue3大佬指教！