详解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 相关文章推荐
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
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程序员的13个好习惯小结
2012/02/20 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
php通过各种函数判断0和空
2020/07/04 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
js实现无缝轮播图
2020/03/09 Javascript
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
Django多个app urls配置代码实例
2020/11/26 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
经营理念口号
2014/06/21 职场文书
班组长安全工作职责
2014/07/15 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
大学生操行评语大全
2014/12/31 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
欢送领导祝酒词
2015/08/12 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书