VUE里子组件获取父组件动态变化的值

在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>

原文地址:https://www.cnblogs.com/amor17/p/10157313.html

时间: 2024-11-09 06:00:45

VUE里子组件获取父组件动态变化的值的相关文章

React子组件和父组件通信

React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从下面这个例子来详细了解: 1 var Father=React.createClass({ 2 getDefaultProps:function(){ 3 return { 4 name:"父组件" 5 } 6 }, 7 MakeMoney:function(){ // 挣钱,供子组件调用

vue组件之间传值、父组件获取子组件的方法

1.子组件向父组件传值 子组件 <template>     <div class="app">        <input @click="sendMsg" type="button" value="给父组件传递值">     </div> </template> <script> export default {       data () {    

Vue 组件&amp;组件之间的通信 之 子组件向父组件传值

子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件com-a要获取子组件data中的height属性: 在子组件com-b中,需要用$.emit()方法将数据以事件的形式发送,$.emit('sendData', data, data…),红色的部分事件名可自定义,数据可传递多个: 在父组件中使用子组件的地方 <com-b @自定义事件名='getD

2.Vue子组件给父组件通信

子组件给父组件通信 如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的 子组件: <template> <div @click='upData'></div> </template> <script type="text/javascript"> export default { data () { return { ms

vue系列(一)子组件和父组件

父组件传递数据到子组件props 父组件 <template> <div class="main"> <div class="top"> <span :class="{action:ind===index}" v-for="(item,index) in lanMenu" v-on:click="clickMenu(index,item.con)">{{ite

【转】Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息,父组件监听消息 分发内容 整个博客使用的源代码-请点击 所以将用三篇博客分别进行介绍以上三种情况和使用 Vue的设计者对组件的理解 Vue的设计者,对组件和父组件之间的关系流上做了阐述,即单向数据流图:父组件向子组件传递数据,子组件回馈事件 组件意味着协同工作,通常父子组件会是这样的关系:组件 A

Vue 子组件调用父组件 $emit

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue 子组件调用父组件 $emit</title>    </head>    <body>        <div id="app">            <table border="2

Vue 子组件传父组件

vue中的传值是个很烦的问题,记录一下自己完成的这个需求. 首先,被引用的称之为子组件,当前页面为父组件,这个不能搞错. 子组件传值,要用到this.$emit. 子组件页面,需要在一个函数中使用this.$emit的方法来传. saves () { localStorage.setItem('note', this.note); this.h1 = localStorage.getItem('note'); console.log(this.h1) // this.conShow = true

Vue中利用$emit实现子组件向父组件通信

Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow="show" @hidechild="hidechild"></child> <button @click="show=true">显示子组件</button> </div> </templa