详解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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
JSON格式化输出
Nov 10 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
python中lambda()的用法
2017/11/16 Python
python的常用模块之collections模块详解
2018/12/06 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
如何真正的了解python装饰器
2020/08/14 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
python 实现简易的记事本
2020/11/30 Python
教师个人师德总结
2015/02/06 职场文书
个人年终总结范文
2015/03/09 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python