详解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 相关文章推荐
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
JS实现随机点名器
Apr 12 Javascript
react国际化react-intl的使用
May 06 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 smarty模版引擎中的缓存应用
2009/12/11 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
php使用GeoIP库实例
2014/06/27 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
js常见遍历操作小结
2019/06/06 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
使用python绘制3维正态分布图的方法
2018/12/29 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
python实现简单的学生管理系统
2021/02/22 Python
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
试述DBMS的主要功能
2016/11/13 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
开业庆典答谢词
2014/01/18 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
天下第一关导游词
2015/02/06 职场文书
2015年工程师工作总结
2015/04/30 职场文书
活动主持人开场白
2015/05/28 职场文书