问题

设计vue组件时，常常有这样一个应用场景：父组件通过接口请求回来的数据传给子组件，然后在子组件内部我们会用一个props来接收，并且将该props赋值给data里面的一个变量（便于我们后期对这个数据操作，如果直接修改props，vue会报错）
这样会有一个问题，就是组件接受到的props是有值的，但是赋给data里面的变量却是空的。

子组件

 props: {title: {type: Stinng,default: ''}, },data() {return {myTitle: this.titile}}

父组件

<template>// 使用子组件<my-component :title="myData"/>
</template>

data() {return {myData: null}
},
created() {this.myData = fetchData() // 模拟请求后端的方法
}

这个时候在子组件中你会看到 title 是有值的，但是 myTitle 却是 null。
其实就是因为我们传给子组件的数据是异步获取的，而把props赋值给data是子组件初始化时执行的，子组件初始化的时候父组件的数据还没请求回来，所以props拿到的 this.titile 是 null，（或者是初始值）。 等到异步请求的数据回来了，props就会得到更新，但组件初始化已经结束了，也就不会再次赋值给data里面的变量了。

解决办法

简单的解决办法就是在子组件中使用watch，监听对应的props，然后实时更新data里面的值

子组件

watch: {title(val){this.myTitle = val;}
}

vue中props传值给data时-props有值但data却是空的问题相关推荐

vue父子组件传值之 $emit和props
vue父子组件传值之 $emit和props 前言子组件向父组件传值父组件向子组件传值前言在进行vue的项目中,我们难免会需要父子组件之间进行传值,父子组件传值可以通过 $emit和props ...
[vue] 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？
[vue] 在使用计算属性的时,函数名和data数据源中的数据可以同名吗? 莫名其妙的问题.可以同名,但data会覆盖methods.并且本就不该同名,同名说明你命名不规范.然后解释为什么会覆盖,因为 ...
Vue中import引入模块路径时的@符号
Vue中import引入模块路径时的@符号 1.ES6 模块主要有两个功能:export 和 import export:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.j ...
vue中过滤器比较两个数组取相同值
在vue中需要比较两个数组取相同值一个大数组一个小数组,小数组是大数组的一部分取相同ID的不同name值有两种写法,两个for循环和map写法 const toName = (ids, arr) ...
vue中prop传值
props配置项功能:让组件接收外部传过来的数据传递数据:<Demo name="xxx"/> 接收数据: 第一种方式(只接收):props:['name'] 第二 ...
vue中的方法 methods 定义时不要使用箭头函数
今天在vue中引入vuex的时候出现了错误,解决了一个多少时,总结如下: vuex 的使用: vuex就是一个状态管里中心也好比一个仓库细分可分为五个部分,这是我不考虑 module 分别是 st ...
android studio debug设置,在Android Studio中使用Flutter进行调试时如何“设置值...”
问题使用"New Flutter Project"创建Flutter App时,以下图像和代码是默认设置 . import 'package:flutter/material.d ...
vue中解决 mouseenter 和 mouseout 时，鼠标进入子组件造成 mouseout 触发而闪烁的问题
解决 mouseenter 和 mouseout 时,鼠标进入子组件造成 mouseout 触发而闪烁的问题 1.需求背景 2.核心解决方法 3.两对鼠标事件的区别 (1)mouseover 和 mo ...
vue中解决模糊搜索输入中文时--未输入完成时触发input事件
在给输入框绑定input或keydown事件时预期效果是有输入法时,输入中文后触发事件,不希望输一个字母就触发一次事件可以用到compositionstart,compositionend. 主流 ...

vue中props传值给data时-props有值但data却是空的问题

问题

解决办法

vue中props传值给data时-props有值但data却是空的问题相关推荐

最新文章

热门文章