vue里子组件如何获取父组件动态变化的值

Vue是一个非常流行的前端框架，组件化开发是Vue的核心特点之一。在Vue中，组件之间的传值是非常常见的操作。对于子组件如何获取父组件动态变化的值的问题，我们可以通过以下几种方式实现。

1. 通过props传递数据

在Vue里面，我们可以通过props选项将数据从父组件传递到子组件中。当父组件的数据改变时，就可以通过传递props的方式将更新后的值传递给子组件。

例如父组件：

<template>
  <div>
    <child :msg="message" />
  </div>
</template>

<script>
  import child from './child.vue'

  export default {
    components: { child },
    data () {
      return {
        message: 'Hello World!'
      }
    },
    mounted () {
      this.timer = setInterval(() => {
        this.message = new Date().toLocaleTimeString()
      }, 1000)
    },
    destroyed () {
      clearInterval(this.timer)
    }
  }
</script>

子组件：

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    props: {
      msg: {
        type: String,
        default: ''
      }
    }
  }
</script>

在这个例子中，父组件中的数据message会在mounted钩子函数里不断更新，然后通过props传递给子组件child。子组件child根据props中的数据msg来更新视图。

2. 通过$parent和$emit方法

在Vue的实例中，有一个特殊的属性$parent，它指向当前组件的父实例。我们可以通过$parent访问父组件的数据。

同时，我们也可以通过子组件中的$emit方法来触发父组件的事件，即父组件接收到事件并做出响应。

例如，父组件：

<template>
  <div>
    <child @on-child-msg="handleChildMsg" />
    <div>{{ message }}</div>
  </div>
</template>

<script>
  import child from './child.vue'

  export default {
    components: { child },
    data () {
      return {
        message: ''
      }
    },
    methods: {
      handleChildMsg (msg) {
        this.message = msg
      }
    }
  }
</script>

子组件：

<template>
  <button @click="sendMsg">发送消息</button>
</template>

<script>
  export default {
    methods: {
      sendMsg () {
        this.$emit('on-child-msg', 'Hello Parent!')
      }
    }
  }
</script>

在这个例子中，子组件child通过$emit方法触发了一个名为'on-child-msg'的事件，并传递了一个字符串'Hello Parent!'。父组件中定义了一个名为handleChildMsg的方法来处理这个事件，并更新了自己的数据message。

3. 通过$attrs和$listeners选项

在Vue中，可以通过$attrs选项传递父组件的所有属性给子组件，而$listeners选项可以监听子组件的所有事件并响应之。

例如，父组件：

<template>
  <div>
    <child v-bind="$attrs" v-on="$listeners" />
    <div>{{ message }}</div>
  </div>
</template>

<script>
  import child from './child.vue'

  export default {
    components: { child },
    data () {
      return {
        message: ''
      }
    },
    methods: {
      handleChildMsg (msg) {
        this.message = msg
      }
    }
  }
</script>

子组件：

<template>
  <button @click="$emit('on-child-msg', 'Hello Parent!')">发送消息</button>
</template>

<script>
  export default {
    methods: {
      sendMsg () {
        this.$emit('on-child-msg', 'Hello Parent!')
      }
    }
  }
</script>

在这个例子中，子组件child并没有使用props接收父组件的数据或事件。而是直接通过$emit方法触发了事件'on-child-msg'。父组件中直接通过$attrs和$listeners选项将所有的属性和事件传递给子组件，从而实现了父组件和子组件的数据交互。