[vue]子组件通过props获取父组件数据以及使用watch解决动态数据不生效问题
父子组件的传值,在Vue官方也写得很清楚,父组件中使用v-bind绑定传送,子组件使用props接收。
父组件通过v-bind绑定数据:
<template>
<router-view :yourdata="yourdata"></router-view>
</template>
<script>
export default {
data:function() {
return {
yourdata:"这是一段测试文字。",
}
}
}
</script>
子组件使用props接收数据:
<template>
<div>{{yourdata}}</div>
</template>
<script>
export default {
props: ['yourdata']
}
</script>
但,如果父组件的yourdata是一个动态的数据,比如是使用axios动态请求的数据,那么这个数据是不会在子组件中变更的,那么就要用到watch:
<template>
<div>{{newdata}}</div>
</template>
<script>
export default {
data:function(){
return{
newdata:"",
}
},
props: ['yourdata'],
watch:{
yourdata:function (newVal,oldVal) {
this.newdata=newVal;//newVal就是获取的动态新数据,赋值给newdata
}
}
}
</script>
快去尝试一下吧~
[vue]子组件通过props获取父组件数据以及使用watch解决动态数据不生效问题的更多相关文章
- VUE里子组件获取父组件动态变化的值
在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在 ...
- vue 简单实现父组件向子组件传值,简单来说就是子组件肆意妄为的调用父组件里后台返回的值
首先在于父子组件传值的方法很多,本人在这里只是简单描述一下一个组件里面引用了子组件,那么子组件如何才能获取父组件中后台返回的值呢? 首先调用组件相信大家都应该明白了(不明白的自己撸撸文档), < ...
- vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
- Vue 父组件主动获取子组件的值,子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header"2. 在父组件中通过this.$refs.header.属性,调用子组件的属性, ...
- vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法
父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...
- vue中使用ts后,父组件获取执行子组件方法报错问题
一.问题产生背景: 子组件的一个方法: update () { this.$nextTick(() => { this.ul_slots.forEach((ul, cur_slots_index ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- 子组件获取父组件数据 propsDown, 父组件获取子组件数据 eventUp
(一) popsDowm 三种方法获取父组件数据:被动获得(1):主动获取(2). 1.被动获得: 父组件:v-bind: 绑定变量参数和方法参数:子组件:props 接收参数.可以在模板中直接使用也 ...
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
随机推荐
- Python面向对象01 /面向对象初识、面向对象结构、类、self、实例化对象
Python面向对象01 /面向对象初识.面向对象结构.类.self.实例化对象 目录 Python面向对象01 /面向对象初识.面向对象结构.类.self.实例化对象 1. 面向对象初识 2. 面向 ...
- CSS实现宽度自适应100%,宽高16:9的比例的矩形
现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML &l ...
- Cordova总是弹出Connection to server was Unsuccessful
开发环境:Cordova版本:6.x 安卓版本:6.0 解决方案一: 在config.xml中添加以下内容: <preference name="LoadUrlTimeoutValue ...
- Mysql UDF提权方法
0x01 UDF UDF(user defined function)用户自定义函数,是mysql的一个拓展接口.用户可以通过自定义函数实现在mysql中无法方便实现的功能,其添加的新函数都可以在sq ...
- 【Nginx】如何为已安装的Nginx动态添加模块?看完我懂了!!
写在前面 很多时候,我们根据当时的项目情况和业务需求安装完Nginx后,后续随着业务的发展,往往会给安装好的Nginx添加其他的功能模块.在为Nginx添加功能模块时,要求Nginx不停机.这就涉及到 ...
- “我放弃了年薪20万的offer…”
最近身边朋友换工作.转型的越来越多.爬到一定高度,或者说到了一定年龄,每个选择都显得尤为重要.不仅因为高昂的机会成本,还有大家对后续规划的多重考虑.有一个说法你可能听过:混职场,要拥有不可替代的能力. ...
- CUDA Programming Guide 学习笔记
CUDA学习笔记 GPU架构 GPU围绕流式多处理器(SM)的可扩展阵列搭建,每个GPU有多个SM,每个SM支持数百个线程并发执行.目前Nvidia推出了6种GPU架构(按时间顺序,详见下图):Fer ...
- P3756 [CQOI2017]老C的方块
题目链接 看到网格图+最优化问题,当然要想黑白染色搞网络流.不过这道题显然无法用黑白染色搞定. 仔细观察那四种图形,发现都是蓝线两边一定有两个格子,两个格子旁边一定还有且仅有一个格子.因此我们可以这么 ...
- Python 3.x 安装PyQt5
一. 安装PyQt5 官方要求Python版本:Python >=3.5 打开命令行 输入 pip install PyQt5 PyQt5安装成功 安装完成功PyQt5后发现没有design ...
- python下载及安装方法
打开 http://www.python.org 找到Downlodas 点击windows 下载安装