Vue子组件props从父组件接收数据并存入data

目录
  • 1.不允许直接修改
  • 2.存在异步的情况
  • 解决思路

经过测试父组件中传递过来的数据有以下特点：

1.不允许直接修改

如果直接使用 this.xxx = action 操作的话 控制台会报下面这个错误

大概的意思是 你小子不要随便劈我瓜，我父组件的瓜岂是你能变的，父组件重新渲染时，这个值会被覆盖，你小子自个儿用计算属性或者data存一下吧

2.存在异步的情况

假如父组件该数据是后台接口获取的数据，那么会产生这种情况。子组件的生命周期都已经走完了，父组件的数据还没传过来。因为V8引擎的运行速度是很快的，万分之一毫秒都等不了，如果是异步的话，子组件里是没有办法操作这个数据的。

父组件
<template>
  <div>
    <children :father="father"></children>
  </div>
</template>
<script>
import children from "./children";
export default {
  components: { children },
  data() {
    return {
      father: null
    };
  },
  mounted() {
    setTimeout(() => {
      this.father = { name: "父亲" };
    }, 1000);
  },
  methods: {}
};
</script>
子组件
<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      student: {
        name: "张三"
      }
    };
  },
  props: {
    father: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    father: {
      handler(newVal) {
        this.fatherData =newVal
        console.log(this.fatherData);
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  mounted() {
    console.log(this.father);
  },
  methods: {}
};
</script>

解决思路

第一步

在父组件中使用子组件时，为子组件加上v-if='flag'，初始赋值为flag=false，等待异步赋值操作完成后修改flag=true，这个操作不单单只试用于异步情况，建议只要涉及到数据流的操作与加工，都加上v-if限制，保证数据获取到之后再开始运作子组件的生命周期。

//也可以这样，简洁一些
 <div>
    <children v-if="father" :father="father"></children>
  </div>

第二步

在子组件中对props进行watch监听，变化后立刻将newVal赋值到data中并保存起来

watch: {
    father: {
      handler(newVal) {
        this.fatherData =newVal
        console.log(this.fatherData);
      },
      deep: true,
      immediate: true
    }
  },

这里还会出现一种额外的情况，就是watch中可以赋值到，也能打印出具体的值出来，但是一到其他生命周期中使用确是空，这个情况

这种情况可能是对象共享地址，或者数据正处于处理中，应当自行进行深克隆一份进行传递，一般只要方法写得比较健壮，此种情况基本不会出现

到此这篇关于Vue子组件props从父组件接收数据并存入data的文章就介绍到这了,更多相关Vue props内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue子组件中mounted取不到props中的值情况

    目录 子组件mounted取不到props的值 方法一 方法二(建议) 组件props第一次取不到值 给值加上sync 使用v-if 在子组件里使用watch 子组件mounted取不到props的值 问题:传到子组建到数据是从接口调用的,导致创建页面的时候把空对象或者数组传给了子组件 方法一 用watch来监听props中值是否有变化 方法二(建议) 调用子组件的时候加上v-if判断,判断数组或者对象是否存在数据 组件props第一次取不到值 给值加上sync <el-dialog title

  • Vue父组件向子组件传值以及data和props的区别详解

    1.在父组件中定义 msg 属性 data:{ msg:'123 -我是父组件中的数据' }, 2.引用子组件 父组件可以在引用子组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用. 把父组件传递过来的 msg 属性,绑定到子组件的 parentmsg 属性上. <com1 :parentmsg="msg"></com1> 3. 在子组件定义部分,需要把父组件传递过来的 parentmsg 属性,先在pro

  • vue如何通过props方式在子组件中获取相应的对象

    vue如何通过props方式在子组件中获取相应的对象

    目录 方法一 所以就可以直接拿取 方法二 有时候会获取不到,可以用一个定时器来获取 方法三 深拷贝 方法四 利用watch监听 这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,所以就简单的记录一下,希望下次不会再犯同样的错误. 子组件定义props,父组件传入数据,子组件在js中获取的时候使用,如果是在html里面,可以直接把变量渲染上去. 我就直接从代码上面来进行 js代码: //子组件中,定义传入的变量的类型等 props: { data: { type: Array, r

  • Vue 使用Props属性实现父子组件的动态传值详解

    如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue&quo

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

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

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

  • Vue项目中props传值时子组件检测不到的问题及解决

    Vue项目中props传值时子组件检测不到的问题及解决

    目录 props传值时子组件检测不到 props用法和传值问题 基本用法 props的使用 单向数据流:props是单向绑定的 总结一下props传值的注意点 props传值时子组件检测不到 我们在Vue项目开发的过程中,经常会需要在父子组件传值,我们都知道,父子组件传值的时候是通过 props 来进行的,但是在父组件的数据动态改变的时候,子组件却接收不到最新变化的数据,这个时候怎么办呢? 首先,传值不能用驼峰命名法,因为vue语法中规定HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大

  • vue3父子组件传值中props使用细节浅析

    目录 setup函数的参数 一.父组件要给子组件传值时,可以通过props来完成组件的通信 二.子组件给父组件传值 总结 setup函数的参数 它主要有两个参数: 第一个参数:props :父组件传递过来的属性会被放到props对象中 第二个参数:context:包含3个属性 attrs:所有的非prop的attribute slots:父组件传递过来的插槽(这个在以渲染函数返回时会有作用,后面会讲到) emit:当我们组件内部需要发出事件时会用到emit 一.父组件要给子组件传值时,可以通过p

  • 解决vue props传Array/Object类型值,子组件报错的情况

    问题: Props with type Object/Array must use a factory function to return the default value. 1.在vue中如果当在父组件通过props传Array/Object类型值给子组件的时候 2.如果子组件的props接收default为 ,如下 报错 原因:props default 数组/对象的默认值应当由一个工厂函数返回 解决: 补充知识:vue的props如何传多个参数 vue父作用域将数据传到子组件通过pro

  • Vue子组件props从父组件接收数据并存入data

    Vue子组件props从父组件接收数据并存入data

    目录 1.不允许直接修改 2.存在异步的情况 解决思路 经过测试父组件中传递过来的数据有以下特点: 1.不允许直接修改 如果直接使用 this.xxx = action 操作的话 控制台会报下面这个错误 大概的意思是 你小子不要随便劈我瓜,我父组件的瓜岂是你能变的,父组件重新渲染时,这个值会被覆盖,你小子自个儿用计算属性或者data存一下吧 2.存在异步的情况 假如父组件该数据是后台接口获取的数据,那么会产生这种情况.子组件的生命周期都已经走完了,父组件的数据还没传过来.因为V8引擎的运行速度是

  • 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

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

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

  • 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子组件监听父组件值的变化

    目录 子组件监听父组件值变化 子组件监听父组件的值同步更新数据 子组件监听父组件值变化 子组件中利用watch监听父组件值的变化 // 子组件 props: ["a"],     watch: {         a(oldValue, newValue) {             // oldValue  a旧值             // newValue a新值         }     } 子组件监听父组件的值同步更新数据 子组件 props : ["data&

  • 详解VUE里子组件如何获取父组件动态变化的值

    在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件. 比如想实现一个switch开关按钮的公用组件: 1.父组件可以向按钮组件传递默认值. 2.子组件的操作可以改变父组件的数据. 3.父组件修改传递给子组件的值,子组件能动态监听到改变. 比如父组件点击重置,开关组件的状态恢复为关闭状态: 方法1: 1.因为存在子组件

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

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

  • 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插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.jb51.net/article/139218.htm 讲到了如何实现一个vue对话框组件,其中涉及到了父组件和子组件的通信,这个不用多说,看我之前的文章就能明白,文章最后也说到了,我们可以使用slot插槽来编写组件,slot用来分发内容到子组件中,从而实现组件的高度复用,编写的组件更加灵活. 还是结合对话框的例子,使用slot来实现对话框组件 注册一个名叫dialog-tip的全局组件 Vue.compone

随机推荐