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>

2. 在子组件中，通过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 Message</button>
</template>
 
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child')
    }
  }
}
</script>

2. 在父组件中，通过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方法展示这个消息。

二、组合式用法

新的 <script setup> 可选语法在 Vue 3.2 中引入。

1. 通过 defineProps()实现父组件向子组件传递数据

父组件:

它发送 msg 数据到子组件 SubComponent

<template>
  <SubComponent :msg="msg"/>
</template>

<script setup>
import SubComponent from './SubComponent.vue';

let msg = "Hello from parent";
</script>

子组件:

在子组件中，你需要通过 defineProps() 获取父组件传递过来的数据。

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

<script setup>
//需要使用到defineProps方法去接受父组件传递过来的数据
//defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps({
  msg: String
})
// let props = defineProps(['msg'])
</script>

在上述的子组件 SubComponent 中，通过defineProps接收到了msg。msg 是从父组件接收时的 prop 的名称，它的类型必须与父组件传递数据的类型一致。然后在子组件的模板中使用 msg 来显示父组件传递的数据。

let props = defineProps(['msg'])

可以这么写，这样就是说不用定义类型，父组件传什么是什么

let props = defineProps({
  msg: String
})

这样写就是限制msg为string类型。

注意：

• props传递的数据时只读的，在子组件中我们只能使用不能直接修改
• 使用defineProps接收之后，我们可以在模版中直接使用， vue3会自动解构。

2. 通过 defineEmits()实现子组件向父组件传递数据

在 Vue 3 的 <script setup> 中，你可以使用 defineEmits() 方法来定义一个组件可以触发的自定义事件。这对于子组件向父组件传递数据的情况来说非常有用。下面是一个示例：

子组件

<template>
  <button @click="handleClick">
    Click me!
  </button>
</template>

<script setup>
//defineEmits是Vue3提供方法,不需要引入直接使用
// 定义组件可以触发的事件
const emit = defineEmits(['update'])

// 点击按钮时触发 'update' 事件
const handleClick = () => {
  emit('update', 'Hello, parent!')
}
</script>

在这个例子中，defineEmits 方法定义了一个可以被组件触发的 ‘update’ 事件。当你点击按钮时，handleClick 方法就会使用 emit 函数触发 ‘update’ 事件，并将数据 ‘Hello, parent!’ 作为该事件的参数传递出去。

在父组件中，你可以监听这个 ‘update’ 事件，并在这个事件触发时获取到被传递的数据：

父组件

<ChildComponent @update="handleUpdate" />

<script setup>
  //引入子组件
  import ChildComponent from './ChildComponent.vue';
  const handleUpdate = (value) => {
    console.log(value)  // 输出：'Hello, parent!'
  }
</script>

在父组件中，你可以使用 v-on:更新="handleUpdate" 或 @update="handleUpdate" 监听 ‘update’ 事件。当 ‘update’ 事件被触发时，handleUpdate 方法将被调用，并接收到从子组件传递过来的数据。

三、总结

Vue3中的父子组件通信利用了props和自定义事件，从而实现了数据的下传和事件的上浮，无疑为我们创造出了极大的便利。而这其中的原理和一些注意事项，都需要我们在实际的开发过程中去掌握和应用。最后，希望本文对理解Vue3中的父子组件通信机制以及如何使用props和自定义事件进行父子组件间通信有所帮助。近在最后，期待在未来的开发过程中，Vue3能带给我们更多的可能性和惊喜