vue3父子组件之间通信porps和自定义事件

Vue.js的世界里,组件间的通信是构建大型应用的基础环节。处理好各个组件间的数据流动,以确保整个应用的稳定性和健壮性,是每个Vue.js开发者必备的技能。在Vue3中,父子组件间的通信主要通过Props和自定义事件来实现。清晰了解和熟练运用它们,有助于我们更高效地构建和管理我们的组件库。在本篇文章中,我们将深入探讨Vue3中的Props和自定义事件,并通过实例来详细介绍它们在父子组件间通信中的应用。

一、选项式用法

Vue.js是一款轻量级的框架,专门用来构建用户界面,特别是单页面应用(SPA)。这款框架的核心理念就是通过组件化开发来复用和构建代码,同时保持代码的可读性和可维护性。在vue中,组件之间的数据交互是通过props自定义事件来实现的。

vue3中,实现父子组件之间的数据交互分为以下几步:

  1. 在父组件中,通过v-bind绑定需要传递给子组件的数据。
<template>
  <ChildComponent :msg="message" />
template>
 
<script>
import ChildComponent from './ChildComponent.vue'
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent'
    }
  }
}
script>
  1. 在子组件中,通过props接收父组件传递过来的数据。
<template>
  <div>{{ msg }}div>
template>
 
<script>
export default {
  props: ['msg']
}
script>

以上示例中,父组件通过v-bind将message数据传给了子组件。子组件通过定义名为msg的props接收了这个数据,然后在模板中使用。

另外,如果你希望子组件能够向父组件发送数据,那么需要使用$emit方法。下面是一个简单的例子:

  1. 在子组件中,使用$emit方法发送一个自定义事件。
<template>
  <button @click="sendMessage">Send Messagebutton>
template>
 
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child')
    }
  }
}
script>
  1. 在父组件中,通过v-on(或者简写为@)监听子组件发送的自定义事件。
<template>
  <ChildComponent @message="displayMessage" />
template>
 
<script>
import ChildComponent from './ChildComponent.vue'
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    displayMessage(msg) {
      alert(msg)
    }
  }
}
script>

以上示例中,当子组件的按钮被点击时,会发送一个名为message的自定义事件,并附带一个字符串数据。父组件通过@message监听了这个自定义事件,并在收到后调用displayMessage方法展示这个消息。

二、组合式用法

新的

你可能感兴趣的:(vue3从入门到精通,vue.js,前端,javascript)