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) } } },
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
解决vue组件props传值对象获取不到的问题
先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1.home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" > </form-picker> export default
-
解决vue2 在mounted函数无法获取prop中的变量问题
如下所示: props: { example: { type: Object, default() { }, }, }, watch: { example: function(newVal,oldVal){ // newVal 为改变后的值 // 继续要处理的事件 }, }, 使用watch 替代 mounted. 通过watch属性来响应数据的变化,当数据改变时执行异步操作. 总结 以上所述是小编给大家介绍的解决vue2 在mounted函数无法获取prop中的变量问题,希望对大家有所帮助,如
-
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
-
vue子组件中mounted取不到props中的值情况
目录 子组件mounted取不到props的值 方法一 方法二(建议) 组件props第一次取不到值 给值加上sync 使用v-if 在子组件里使用watch 子组件mounted取不到props的值 问题:传到子组建到数据是从接口调用的,导致创建页面的时候把空对象或者数组传给了子组件 方法一 用watch来监听props中值是否有变化 方法二(建议) 调用子组件的时候加上v-if判断,判断数组或者对象是否存在数据 组件props第一次取不到值 给值加上sync <el-dialog title
-
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子组件向父组件通信与父组件调用子组件中的方法
子组件向父组件通信 子组件的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的属性值 .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
目录 1.不允许直接修改 2.存在异步的情况 解决思路 经过测试父组件中传递过来的数据有以下特点: 1.不允许直接修改 如果直接使用 this.xxx = action 操作的话 控制台会报下面这个错误 大概的意思是 你小子不要随便劈我瓜,我父组件的瓜岂是你能变的,父组件重新渲染时,这个值会被覆盖,你小子自个儿用计算属性或者data存一下吧 2.存在异步的情况 假如父组件该数据是后台接口获取的数据,那么会产生这种情况.子组件的生命周期都已经走完了,父组件的数据还没传过来.因为V8引擎的运行速度是
-
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 } } 子
随机推荐
- 菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能)
- GO语言(golang)基础知识
- Linux 的cp命令及示例详解
- Java文件选择对话框JFileChooser使用详解
- BootStrap实现邮件列表的分页和模态框添加邮件的功能
- asp.net中Session缓存与Cache缓存的区别分析
- php示例详解Constructor Prototype Pattern 原型模式
- 深入php内核之php in array
- Linux平台PHP5.4设置FPM线程数量的方法
- python创建进程fork用法
- php 数学运算验证码实现代码
- BootStrap 导航条实例代码
- Android添加水印的正确方法 只要三步!
- JAVA Web实时消息后台服务器推送技术---GoEasy
- 人生价值的计算公式
- WinForm中变Enter键为Tab键实现焦点转移的方法
- LNMP添加、删除虚拟主机及伪静态使用教程
- java求三个数的最大值的示例分享
- python optparse模块使用实例
- Android中okhttp3使用详解