vue组件子传父，传对象，传复杂数据的时候传输失败，怎么解决

最新推荐文章于 2023-08-30 18:14:57 发布
最新推荐文章于 2023-08-30 18:14:57 发布
阅读量575 收藏
点赞数
分类专栏： 前端 文章标签： vue.js html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56804390/article/details/120547157
版权

1、这个方法可以试一试，不一定能实现

watch:{

prop_detail:{//对象，所要传的对象，在props也需要写

       deep:true,

       immediate:true,

       handler(nv){

         this.detail = nv,//这个地方看能不能拿到nv,如果能拿到，赋值可能也会有问题

      } 

     },

}

2、能实现，拿到父   页面的数据

detailShow(nv){//是我的弹窗名字

      if(!nv) this.detail = {}

      this.detail = this.$parent.$data.appointInfo //子组件如何拿到父组件的数据

    }

喜欢码字的girl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中如何让子组件修改父组件数据
08-27
主要介绍了vue中子组件修改父组件数据的相关资料，文中介绍了vue中watch的认识，关于子组件修改父组件属性认识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue的props父传子的示例代码
10-15
主要介绍了Vue的props父传子的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用VUE时父子组件传递参数失败
最新发布
weixin_53094798的博客
08-30 678
原因：子组件在定义 propr属性的时 名称为 goods，但是在父组件中的参数传递时 good,导致参数传递失败（及时绑定的参数名称为 :goods）解决：将参数名称改为对应的 goods。
vue 父子组件互相传值容易出现的报错
liudanyang_21的博客
08-17 760
对于父子组件之间的互相传值，报错如下： [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: "propTextTip" 大概意思是：避免直接更改一
父组件向子组件传对象
miya的博客
01-04 9685
1.通过对象的嵌套 在父组件中引入子组件，数据绑定为temp <script> export default{ data(){ temp:{ manager:{ name:"", age:"" } } ...
vue 父子组件传值及不生效问题
sky_sunshine_x的博客
09-02 3635
1.父组件 <!--顶部--> <topHead :parent="testdata" v-if="testdata.length>0"></topHead> data() { return { testdata:[], }} methods: { //获取信息 getBannerList(){ getHone().then(response => { this.testda
子组件往父组件传值 失败的三个问题
04-24 3331
第一个问题：传入的事件名只能是小写 不可以是驼峰命名法 第二个问题： 就是vue2写法：this.$emit("事件名"，'传给父组件的数据') 但是vue3不能像上面了 vue3写法 ： this.$parent.$emit("事件名"，'传给父组件的数据') 第三个问题是 用$emit()的时候是一个递归组件 有时候用不了 有时候能用 给递归组件加上v-on="$listeners" 问题就会解决 ...
Vue子组件向父组件使用自定义事件$emit传递数据无效的坑
coderYYY的博客
04-01 6614
子级向父级传递—自定义事件 当子组件需要向父组件传递数据时，用到的是自定义事件 自定义事件的流程： 在子组件中，通过$emit()来触发事件。 在父组件中，通过v-on来监听子组件事件。 我们来看一个简单的例子： 我们之前做过一个两个按钮+1和-1，点击后修改counter。 我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件。 这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total。 <!--父组件模板--> <div i
vue子组件给父组件传值时接收不到数据
蓝_蓝的博客
06-12 1万+
子组件给父组件传值过程中，接收不到数据问题。
Vue有关子组件向父组件传值问题（已解决）
九七的博客
08-09 677
Vue有关子组件向父组件传值问题（已解决）
vue 父组件与子组件传递参数失败问题
chenjun1992的博客
06-17 2090
今天写博客获取评论模块，需要从父组件向子组件传递topicId，但评论一直不显示 子组件： export default { name: "CommentView", prop: ['topicId'], components: { AddComment }, data() { return { comments: [] }; }, created() { this.fetchComment() }, methods: { f
Vue3中父子组件传值
SignalFire的博客
05-23 697
父组件向子组件传值 父组件Home <template> <div class="home"> <Head :title='msg'></Head> </div> </template> <script> import Head from '@/components/Head.vue' export default { name: 'Home', components: { Head...
vue父组件异步获取数据传给子组件的方法
10-18
主要介绍了vue父组件异步获取数据传给子组件,需要的朋友可以参考下
解决vue 子组件修改父组件传来的props值报错问题
10-16
今天小编就为大家分享一篇解决vue 子组件修改父组件传来的props值报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue父组件传给子组件数据,子组件得不到数据解决方法
热门推荐
m0_49714202的博客
07-21 1万+
Vue父组件传给子组件数据,子组件得不到数据解决方法
Vue 子组件触发父组件事件,传递多个参数以及异常情况处理
lazy_tomato的博客
05-08 1197
父组件定义接收的事件时，添加括号会导致$emit的传参无法接收到。上述的示例其实就是一个最基础的，子组件触发父组件事件的代码。事件名称不会类似组件名，prop；的事件名和父组件接收的事件名必须相同。官方文档对这里了的做了说明，并且推荐用。
Vue 子组件与父组件通信，v-for生成的子组件通信，v-on/@事件参数问题
weixin_43818307的博客
11-11 970
Vue 子组件与父组件的数据通信，v-for生成的子组件与父组件的数据通信，v-on/@事件参数问题
vue子组件向父组件传值
weixin_42260782的博客
07-20 1637
父组件index，子组件question， 下图的对话框，对话内容socketOptions是定义在父组件中的，对话框的内容，都是通过websocket推送过来的， 现在在子组件中，通过网络请求，拿到问答信息，想要放到对话框里，就需要用到vue的子组件向父组件传值，大概分为2步 一、在子组件中自定义事件 在子组件中要做的工作只是，使用this.$emit()命令来自定义一个事件。该命令可以传递多个参数： 第一个参数是自定义事件的名字，是必须的， 后面的参数是从子组件传递给父组件的数据，是可选的。要传递几
子组件多次复用且传参到父组件时遇到的一些问题。
SilenceJude的博客
01-10 4289
问题描述： 我们都知道，父子组件之间传参用props，子向父用$emit,兄弟间有bus。但是今天遇到个问题，A组件是一个selector选择器小组件，根据传参不同选择项目也不同，返回结果也不同。B组件中使用了4次A组件，传参都不一样，且需要将4次的返回结果都保存下来。 其实就是下图4个自己封装的选择器，分别是A组件的4次复用，整个的大组件是B，B组件需要根据A组件的值来进行搜索，获取统计等操作。...
vue3子组件接收父组件传的复杂数据
05-26
在Vue3中，子组件可以接收父组件传递的复杂数据。通常情况下，我们可以将数据作为props传递给子组件。 下面是一个示例代码： ```html <template> <div> <child-component :data="complexData"></child-component> </div> </template> <script> import ChildComponent from "./ChildComponent.vue"; export default { components: { ChildComponent, }, data() { return { complexData: { name: "John", age: 30, address: { city: "New York", state: "NY", }, hobbies: ["reading", "music", "travel"], }, }; }, }; </script> ``` 在父组件中，我们定义了一个名为complexData的复杂数据对象，并通过props将其传递给子组件。 在子组件中，我们需要通过props定义接收数据的属性。例如，在ChildComponent.vue组件中，我们可以这样定义props： ```html <template> <div> <h2>{{ data.name }}</h2> <p>Age: {{ data.age }}</p> <p>Address: {{ data.address.city }}, {{ data.address.state }}</p> <h3>Hobbies:</h3> <ul> <li v-for="hobby in data.hobbies" :key="hobby">{{ hobby }}</li> </ul> </div> </template> <script> export default { props: { data: { type: Object, required: true, }, }, }; </script> ``` 在子组件中，我们使用了props接收传递进来的复杂数据对象，并在模板中使用它的属性和方法。 需要注意的是，我们需要在子组件中明确指定props接收的数据类型，这里是Object类型。同时，required选项可以指定该数据是否是必须的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值