Vue 中组件之间传递数据

Vue是一款功能强大的前端框架，通过它可以轻松的创建可复用的组件。但是，当涉及到从一个组件传递数据到另一个组件时，就需要使用父子组件之间的通信来实现。

本文将会介绍Vue中组件之间传递数据的几种方式，包括props、$emit、$parent、$children和$refs等。

Props

Vue 中组件间传递数据最常见的方式就是使用props。父组件通过props向子组件传递数据，子组件通过props接收数据。

父组件中传递数据

<template>
  <div>
    <child-component :message="msg"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      msg: 'Hello World'
    }
  }
}
</script>

子组件中接收数据

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
  export default {
    props: {
      message: String
    }
  }
</script>

$emit

当子组件需要把数据传递给父组件时，可以使用$emit来实现。子组件通过$emit触发事件，并传递数据，父组件通过@事件监听并接收数据。

子组件中传递数据

<template>
  <div>
    <button @click="handleClick">发送数据</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'Hello Vue'
      }
    },
    methods: {
      handleClick() {
        this.$emit('send-msg', this.message)
      }
    }
  }
</script>

父组件中接收数据

<template>
  <div>
    <child-component @send-msg="handleReceive"></child-component>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    methods: {
      handleReceive(msg) {
        console.log(msg) // 'Hello Vue'
      }
    }
  }
</script>

$parent

在某些场景下，需要在一个子组件中访问父组件的数据或方法。此时可以使用$parent来获取父组件实例，并直接访问其数据或方法。

子组件中访问父组件数据

<template>
  <div>
    {{ $parent.msg }}
  </div>
</template>

$children

与$parent类似，$children可以获取当前组件的所有子组件实例，通过它可以访问到子组件的数据或方法。

父组件中访问子组件数据

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    mounted() {
      console.log(this.$refs.child.msg) // 'Hello World'
    }
  }
</script>

$refs

$refs是Vue提供的一个特殊属性，用来获取页面里的DOM节点或Vue组件实例。

在组件中，可以给组件加上ref属性，然后通过$refs来获取该组件的实例。

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    mounted() {
      console.log(this.$refs.child) // 组件实例
    }
  }
</script>

以上就是Vue中组件之间传递数据的几种方式，不同的场景下可以使用不同的方式来实现。希望可以帮到你！