详解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 相关文章推荐
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
Three.js学习之几何形状
Aug 01 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
EasyUI实现下拉框多选功能
Nov 07 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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
给多个地址发邮件的类
2006/10/09 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
python简单的函数定义和用法实例
2015/05/07 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
python输出pdf文档的实例
2020/02/13 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
pymysql模块使用简介与示例
2020/11/17 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
中文师范生自荐信
2014/01/30 职场文书
公司副总经理任命书
2014/06/05 职场文书
董事长助理工作职责
2014/06/08 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python