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


Posted in Javascript onDecember 26, 2018

在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。

场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件。

比如想实现一个switch开关按钮的公用组件:

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

1.父组件可以向按钮组件传递默认值。

2.子组件的操作可以改变父组件的数据。

3.父组件修改传递给子组件的值,子组件能动态监听到改变。

比如父组件点击重置,开关组件的状态恢复为关闭状态:

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

方法1:

1、因为存在子组件要更改父组件传递过来的数据,但是直接操作props里定义的数据vue会报错,所以需要在data里重新定义属性名并将props里的数据接收。

2、首先想到的肯定是在computed计算属性里监听数据的变化,那就直接在computed里监听父组件传递过来的props数据的变化,如果有变动就进行操作,如:

export default {
 name: 'SwitchButton',
 props: {
  status: {
   type: Boolean,
   default () {
    return false
   }
  }
 },
 data () {
  return {
   switchStatusData: this.status // 重新定义数据
  }
 },
 computed: {
  switchStatus: function () {
   return this.status // 直接监听props里的status状态
  }
 }
 }
}

这样就可以在使用switchStatus的地方动态的监听到父组件status的变化。似乎只针对简单的数据类型有效。

方法2:

使用watch和computed组合实现:如

export default {
 name: 'SwitchButton',
 props: {
  status: {
   type: Boolean,
   default () {
    return false
   }
  }
 },
 data () {
  return {
   switchStatusData: this.status
  }
 },
 computed: {
  switchStatus: function () {
   return this.switchStatusData // 监听switchStatusData 的变化
  }
 },
 watch: {
  status (newV, oldV) { // watch监听props里status的变化,然后执行操作
   console.log(newV, oldV)
   this.switchStatusData = newV
  }
 },
 methods: {
  switchHandleClick () {
   this.switchStatusData = !this.switchStatusData
   this.$emit('switchHandleClick', this.switchStatusData)
  }
 }
}

下面是实现该组件的代码:

<template>
 <span class="switch-bar" :class="{'active': switchStatus}" @click="switchHandleClick"><span class="switch-btn"></span></span>
</template>
<script>
export default {
 name: 'SwitchButton',
 props: {
  status: {
   type: Boolean,
   default () {
    return false
   }
  }
 },
 data () {
  return {
   switchStatusData: this.status
  }
 },
 computed: {
  switchStatus: function () {
   return this.status
  }
 },
 // watch: {
 //  status (newV, oldV) {
 //   console.log(newV, oldV)
 //   this.switchStatusData = newV
 //  }
 // },
 methods: {
  switchHandleClick () {
   this.switchStatusData = !this.switchStatusData
   this.$emit('switchHandleClick', this.switchStatusData)
  }
 }
}
</script>
<style lang="stylus" scoped>
 @import "~styles/varibles.styl"
 .area-wrapper
  line-height: .8rem;
  padding: 0 .4rem;
  .switch
   float: right;
   font-size: 0;
  .switch-bar
   position: relative;
   display: inline-block;
   width: .8rem;
   height: .4rem;
   border-radius: .4rem;
   background: #ddd;
   border: 2px solid #ddd;
   vertical-align: middle;
   transition: background .3s, border .3s;
   &.active
    background: $bgColor;
    border: 2px solid $bgColor;
    .switch-btn
     left: .4rem;
     background: #fff;
  .switch-btn
   position: absolute;
   left: 0px;
   display: inline-block;
   width: .4rem;
   height: .4rem;
   border-radius: .2rem;
   background: #fff;
   transition: background .3s, left .3s;
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery清空textarea等输入框实现代码
Apr 22 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 #Javascript
微信小程序实现文字跑马灯
May 26 #Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 #Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 #Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 #Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 #Javascript
微信小程序开发问题之wx.previewImage
Dec 25 #Javascript
You might like
php使用curl简单抓取远程url的方法
2015/03/13 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
获取python文件扩展名和文件名方法
2018/02/02 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
恶意软件的定义
2014/11/12 面试题
介绍一下Linux文件的记录形式
2013/09/29 面试题
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL