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

目录
  • 子组件mounted取不到props的值
    • 方法一
    • 方法二（建议）
  • 组件props第一次取不到值
    • 给值加上sync
    • 使用v-if
    • 在子组件里使用watch

子组件mounted取不到props的值

问题：传到子组建到数据是从接口调用的，导致创建页面的时候把空对象或者数组传给了子组件

方法一

用watch来监听props中值是否有变化

方法二（建议）

调用子组件的时候加上v-if判断，判断数组或者对象是否存在数据

组件props第一次取不到值

给值加上sync

<el-dialog title="测试" :visible.sync="dialog" width="40%">
      <room-Checked @event1="change($event)" :date.sync="date" /> 
    </el-dialog>

使用v-if

<el-dialog title="测试" :visible.sync="dialog" width="40%">
      <room-Checked @event1="change($event)" :date.sync="date" v-if="data.length > 0" /> 
    </el-dialog>

记得在data里先定义一下 data= []

在子组件里使用watch

props:[ data ]
  watch: {
    date (newValue, oldValue) {
      if (newValue !== oldValue) {
          this.id = this.data[0].id
        console.log('date', this.id)
      }
    }
  },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中子组件的methods中获取到props中的值方法

    父子组件通信 这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中 <template> <div> <head-top></head-top> <section class="data_section"> <header class="chart-title">数据统计</header> <el-row :gutter=&

  • 解决vue props 拿不到值的问题

    方案一: 在子组件中设置v-if='flag',初始值false,在成功获取数据后设置为true // 子组件 <echarts :datas="conditionStatisticsData" v-if="flag"></echarts> // 成功获取数据后 flag设置成true homeResource.getConditionData().then((res) => { this.flag = true if (res.dat

  • 解决vue2 在mounted函数无法获取prop中的变量问题

    如下所示: props: { example: { type: Object, default() { }, }, }, watch: { example: function(newVal,oldVal){ // newVal 为改变后的值 // 继续要处理的事件 }, }, 使用watch 替代 mounted. 通过watch属性来响应数据的变化,当数据改变时执行异步操作. 总结 以上所述是小编给大家介绍的解决vue2 在mounted函数无法获取prop中的变量问题,希望对大家有所帮助,如

  • 解决vue组件props传值对象获取不到的问题

    先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1.home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" > </form-picker> export default

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

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

  • vue子组件通过.sync修饰符修改props属性方式

    vue子组件通过.sync修饰符修改props属性方式

    目录 子组件通过.sync修饰符修改props属性 子组件修改父组件prop的几种方式 常用方式 取巧方式 子组件通过.sync修饰符修改props属性 在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed

  • vue子组件封装弹框只能执行一次的mounted问题及解决

    目录 vue子组件封装弹框只能执行一次的mounted vue mounted方法在什么情况下使用和js定时器使用 我们在什么时候使用mounted方法? 总结 vue子组件封装弹框只能执行一次的mounted 封装了一个子组件来处理弹框内容,发现只能执行一次,在父组件添加一个 v-if 即可,当每次弹框关闭的时候销毁掉该组件就没有问题了. 贴一下简易代码: 父组件: <add-dialog v-if="addVisible" :dialogVisible="addVi

  • Vue子组件向父组件通信与父组件调用子组件中的方法

    Vue子组件向父组件通信与父组件调用子组件中的方法

    子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息 父组件调用子组件

  • Vue 子组件更新props中的属性值问题

    Vue 子组件更新props中的属性值问题

    目录 Vue子组件更新props的属性值 .sync属性 v-model应用 Vue子组件中修改Props的几种情况 针对以上几种情况再逐一进行分析 结果展示 结论 Vue子组件更新props的属性值 在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:.sync 和 自定义v-model .sync属性 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync 父组件 <template> <div id="app&q

  • vue 子组件watch监听不到prop的解决

    问题描述 在vue项目中,父组件通过prop给子组件传值时,如果prop值是从服务器端获取,则父组件可能会传给子组件一个默认值(服务端数据还未及时获取),那么,我们就需要实时watch这个prop值,一旦prop值有更新,将立即通知子组件更新. 解决方案 watch: { levelDetail: { immediate: true, // 很重要!!! handler (val) { this.levelPersonal = !val ? {} : val // console.log('ac

  • vue子组件如何使用父组件传过来的值

    目录 子组件使用父组件传过来的值 父组件 子组件 vue子组件调用父组件数据 子组件使用父组件传过来的值 父组件 <alarmstatistics :roless.sync="role"></alarmstatistics>   import alarmstatistics from "./alarmstatistics.vue";   components: {     alarmstatistics,   }, 子组件   props:

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

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

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

  • vue子组件使用自定义事件向父组件传递数据

    vue子组件使用自定义事件向父组件传递数据

    使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit('自定义的事件名称',传递给父组件的数据) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></scr

  • vue 子组件向父组件传值方法

    子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 <component-a v-on:child-say="listenToMyBoy"></component-a> <p>Do you like me? {{childWords}}</p> methods: { listenToMyBoy: function (somedata){ this.childWords = somedata } } 子

随机推荐