Vue3小应用：利用子组件修改父组件传过来的props数据

Vue3小应用:用子组件修改父组件传输的props数据。

最近，新项目是用vue3建造的，准备开始使用vue3语法。从这篇文章开始，记录vue3遇到的一些问题和一些语法的使用方法，以便以后复习，也可以帮助一些小伙伴。

修改父组件的普通数据

用v-mode语法代替vue2.x的.sync修饰符

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

1. <ChildComponent v-model:test=“test” />

事实上，它是以下简写：

1. <ChildComponent :test=“test” @update:test=“test = $event” />

3.子组件

用emit修改子组件的父组件数据

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

Web176教程网：vue3相关文档。

修改复杂数据(对象)的父组件

在vue2.在x中，虽然子组件不能修改父组件传输的普通数据，但可以直接操作复杂数据，但vue3不能。目前我只能用类似vue2的语法来解决修改父组件对象数据的问题。如果有大佬有更好的办法，也希望评论区给我一些建议！！！

父组件reactive将对象定义为响应数据，并将其绑定到子组件上，例如：

1. <ChildComponent :obj=“obj” @update:obj=“updateObj” />
2.  
3. const obj = reactive({
4.   key: ‘test’
5. })

父组件定义了一种修改数据的方法：

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

子组件emit定义了一个可触发事件：

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