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

 更新时间:2018年12月26日 09:30:52   作者:Amor丶Diamond  
这篇文章主要介绍了详解VUE里子组件如何获取父组件动态变化的值,子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件,需要的朋友可以参考下

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

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

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

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

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

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

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

方法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>

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

相关文章

  • vue表单验证你真的会了吗?vue表单验证(form)validate

    vue表单验证你真的会了吗?vue表单验证(form)validate

    这篇文章主要介绍了vue表单验证你真的会了吗?vue表单验证(form)validate,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 解决vue页面DOM操作不生效的问题

    解决vue页面DOM操作不生效的问题

    下面小编就为大家分享一篇解决vue页面DOM操作不生效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 在vue中created、mounted等方法使用小结

    在vue中created、mounted等方法使用小结

    这篇文章主要介绍了在vue中created、mounted等方法使用小结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue如何将v-for中的表格导出来

    vue如何将v-for中的表格导出来

    这篇文章主要介绍了vue如何将v-for中的表格导出来,需要的朋友可以参考下
    2018-05-05
  • vue-lazyload使用总结(推荐)

    vue-lazyload使用总结(推荐)

    vue项目用到vue-lazyload做图片懒加载,这篇文章主要介绍了vue-lazyload使用总结,解决这个插件的坑,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • 从零撸一个pc端vue的ui组件库( 计数器组件 )

    从零撸一个pc端vue的ui组件库( 计数器组件 )

    这篇文章主要介绍了pc端vue的ui组件库的实现方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue开发简单上传图片功能

    vue开发简单上传图片功能

    这篇文章主要为大家详细介绍了vue开发简单上传图片功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue结合后台导入导出Excel问题详解

    Vue结合后台导入导出Excel问题详解

    这篇文章主要介绍了Vue结合后台导入导出Excel问题详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 在vue中使用v-bind:class的选项卡方法

    在vue中使用v-bind:class的选项卡方法

    今天小编就为大家分享一篇在vue中使用v-bind:class的选项卡方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 基于Vue生产环境部署详解

    基于Vue生产环境部署详解

    下面小编就为大家带来一篇基于Vue生产环境部署详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论