vue3子组件如何修改父组件传过来的props数据

目录
  • 前言
  • 1. 修改父组件普通数据
  • 2. 修改父组件复杂数据（对象）
  • 最后

前言

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

1. 修改父组件普通数据

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

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

其实它是以下的简写：

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

3.子组件

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

//ChildComponent
   props: {
    test:String     //接收父组件数据
  },
  emits: ['update:test'],      //定义组件可触发的事件
  setup(props,ctx){
    function onClick() {
      ctx.emit('update:test','child')
    }
  }

相关vue3文档

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

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

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

<ChildComponent :obj="obj" @update:obj="updateObj" />

const obj = reactive({
  key: 'test'
})

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

function updateObj(params){
  obj.key = params
}
return{
  updateObj
}

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

//ChildComponent
   props: {
    obj:Object     //接收父组件数据
  },
  emits: ['update:obj'],      //定义组件可触发的事件
  setup(props,ctx){
    function onClick() {
      ctx.emit('update:obj','child')
    }
  }

最后

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

到此这篇关于vue3子组件如何修改父组件传过来的props数据的文章就介绍到这了,更多相关vue3修改父组件传的props数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue中子组件向父组件传值以及.sync修饰符详析

    目录 Vue中 常见的组件通信方式可分为三类 1. 之前的写法 2. .sync 修饰符 总结 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue中 provide.inject 详解及使用 Vue中 常见的组件通信方式可分为三类 父子通信 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($p

  • vue父组件调用子组件方法报错问题及解决

    目录 vue父组件调用子组件方法报错 vue父组件调用子组件方法及遇到的问题 vue父组件调用子组件方法报错 在父组件定义了一个tab标签页,每一个标签页下面都调用不同的组件, 如下图所示: 子组件中定义的方法: setup() { const getList = () =>{ const date = moment(new Date()).format('YYYY-MM') loading.value = true apiGetPageList({ salaryDate: date, page

  • Vue父组件和子组件之间数据传递和方法调用

    vue组件在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性. 父组件向子组件传值(子组件主动获取父组件的数据和方法) 父组件import引用子组件 使用子组件时在子组件上添加一个v-bind属性,并绑定上数据 在子组件中创建 props ,在props 中创建相同的属性名,用来接收数据 把接收到的数据在子组件中使用 子组件向父组件传值(父组件主动获取子组件的数据和方法) 子组件中需要发出该自定义

  • vue父组件异步传递props值,子组件接收不到解决方案

    目录 父组件异步请求数据之后传值给子组件,子组件接收不到 这里有两种解决思路 父组件传递props异步数据到子组件遇到的问题 状况一 案例二 父组件异步请求数据之后传值给子组件,子组件接收不到 贴上父组件代码图: 子组件代码图: 打印结果: 父组件异步请求数据回来在传到子组件,子组件无法接收,打印的依然是默认值. 这里有两种解决思路 第一种:子组件使用watch监听 但是watch监听也会有接收不到值的情况,因为要修改props的favoriteValue的值,favoriteValue接收不到

  • Vue 通过this.$emit()方法子组件向父组件传值(步骤分享)

    目录 子组件使用this.$emit()向父组件传值 第一步 在父组件中引入子组件 第二步 子组件向父组件传值 子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 //定义组件 components:{ indexImportOrder, }, 使用 <indexImport

  • vue3.0 子组件如何修改父组件传递过来的值

    目录 子组件修改父组件传递过来的值 使用toRefs进行解决 子组件向父组件传值emit的使用注意事项 子组件的写法 父组件使用 子组件修改父组件传递过来的值 vue 的子组件 不是 不能直接更改父组件的值,需要将props 的值 给到子组件,后再修改, 否则:Unexpected mutation of “props” prop. vue3提供了一个解决:toRefs:https://v3.cn.vuejs.org/api/refs-api.html#torefs toRefs 非常有用,这样

  • vue之父组件向子组件传值并改变子组件的样式

    问题描述:在做视频网站过程中发现每个视频的样式其实是大致相同的,所以就想着直接写个组件,但是又看不懂官网的传值,所以自己找了个视频看明白了. 想实现的效果: vue父组件向子组件传值具体实现代码: 父组件的代码: <!-- 注释的部分是之前没有用组件的代码 --> <!-- <ul class="videoList"> <li v-for="item in videoList" :key="item.id" c

  • 详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)

    在 vue2 中 ref 被用来获取对应的子元素,然后调用子元素内部的方法. <template> <!-- 子组件 --> <TestComponent ref="TestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' export default { com

  • vue3子组件如何修改父组件传过来的props数据

    目录 前言 1. 修改父组件普通数据 2. 修改父组件复杂数据(对象) 最后 前言 最近新项目用vue3搭建的,准备开始使用vue3的语法,从这篇开始记录下vue3遇到的一些问题和一些语法的使用方法,以便于以后复习,也可能帮助到一些小伙伴. 1. 修改父组件普通数据 使用v-mode语法,代替了vue2.x的.sync修饰符 父组件用ref() 定义一个普通数据为响应式变量,例 var test = ref(‘parent’) 父组件用v-mode将数据绑定到子组件上 <ChildCompone

  • 解决vue 子组件修改父组件传来的props值报错问题

    vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "result&

  • vue通过子组件修改父组件prop的多种实现方式

    vue通过子组件修改父组件prop的多种实现方式

    目录 前言 常用方式 1. 通过父组件on监听子组件emit事件实现修改prop 2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop 取巧方式 3.通过data实现修改prop 4.通过计算属性computed实现修改prop 前言 实际工作项目开发中,很经常会有父组件先传递值给子组件,再由子组件渲染展示的场景,下面我总结一下目前工作中遇到和用过的一些方式,也算是给大家一个实现方式和思路参考,如有理解不对or有其他方法欢迎在评论区留言指导- 常用方式 推荐,遵循prop单向传

  • Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)

    有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref=&

  • VUEJS 2.0 子组件访问/调用父组件的实例

    有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref=&

  • vue slot 在子组件中显示父组件传递的模板

    父组件使用没有指定slot属性,默认为default 在slot中可以使用默认值,如果父组件没有传递对应的slot,则会显示默认值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body&

  • vue中如何让子组件修改父组件数据

    一.关于vue中watch的认识 我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候 •1.常见的使用场景 ... watch:{ value(val) { console.log(val); this.visible = val; } } ... •2.如果要一开始就执行 ... watch: { firstName: { handler(newName, oldName) { this.fullName = newName + '-' + this.lastName;

  • vue.js 子组件无法获取父组件store值的解决方式

    子组件: props:['myDetail'] 父组件: <子组件 :myDetail="detail"></子组件> computed:{ detail(){ return this.$store.state.XXXX.yyyy } } 子组件的参数值不会随着父组件store中参数值的改变而改变 修改为 父组件: data:{ detail:{} } methods:{ reloadDetail(){ this.detail=JSON.parse(JSON.s

  • vue子组件如何获取父组件的内容(props属性)

    vue子组件如何获取父组件的内容(props属性)

    目录 子组件如何获取父组件的内容 props属性 vue父→子组件的props传值 需求1 需求2 子组件如何获取父组件的内容 props属性 组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. 想要引用父组件需要: <bbb v-bind:myMsg="msg"></bbb>//子组件将父组件的数据msg绑定到myMsg上 bbb:{     props:{         'myMs

随机推荐