vue之父子组件间通信实例讲解(props、$ref、$emit)

Vue之父子组件间通信实例讲解

在Vue中，父组件和子组件之间是可以互相通信的。在实际的开发中，组件间通信是非常常见的需求。本文将介绍Vue中常见的父子组件间通信方式，并结合实例进行详细讲解。

Props

Props是Vue中父子组件通信的最基本方式。通过在父组件中使用v-bind或简写形式的:来将数据传递给子组件作为props。子组件可以通过props接收这些值。这样父组件和子组件之间就可以进行简单的数据传递。

示例1

下面是一个简单的示例，展示了如何使用Props进行父子组件间通信：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data () {
    return {
      parentMessage: 'Hello from Parent Component'
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

在这个示例中，父组件中将parentMessage的值通过messageprops传递给子组件，子组件中通过props接收这个值并显示在页面上。

$ref

$ref是Vue中另一种父子组件通信的方式。通过在父组件中使用ref来给子组件赋一个引用的id。然后可以通过$refs访问子组件并调用其方法或访问其数据。

示例2

下面是一个示例，展示了如何使用$ref进行父子组件之间的通信：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="onClick">子组件方法调用</button>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    onClick () {
      this.$refs.child.sayHello()
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  data () {
    return {
      message: 'Hello from Child Component'
    }
  },
  methods: {
    sayHello () {
      alert(this.message)
    }
  }
}
</script>

在这个示例中，父组件使用ref给子组件赋一个id为child的引用。然后在父组件中可以使用$refs.child来访问子组件，并调用其sayHello方法。

$emit

$emit是Vue中父子组件通信的另一种方式。通过在子组件中使用$emit来触发一个事件，并传递一个参数给父组件。在父组件中通过在子组件上使用v-on或@来监听这个事件，然后通过事件回调函数获取子组件传递的参数。

示例3

下面是一个示例，展示了如何使用$emit进行父子组件之间的通信：

<template>
  <div>
    <child-component @send-message="onReceiveMessage"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    onReceiveMessage (message) {
      this.message = message
    }
  }
}
</script>

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

<script>
export default {
  name: 'ChildComponent',
  data () {
    return {
      message: 'Hello from Child Component'
    }
  },
  methods: {
    sendMessage () {
      this.$emit('send-message', this.message)
    }
  }
}
</script>

在这个示例中，子组件中使用$emit触发一个名为send-message的事件，并将this.message作为参数传递，父组件中使用v-on或@来监听这个事件，然后在onReceiveMessage方法中获取并处理这个参数。