vue3.0通信方式之 Props 和 emit

![在这里插入图片描述](https://img-blog.csdnimg.cn/d3a8eda07b064292a201216388565177.png#pic_center

父传子

<template>
  <div>
    <h2>父组件</h2>
    <p>子组件传递的消息：{{ message }}</p>
    <button @click="handleClick">发送消息给子组件</button>
    <hr>
    // :message为子组件接受的变量名，"message"为父组件传递的参数名
    // @update:message为定义的事件名，用于子组件传值。handleUpdate为父组件接受参数的函数名
    <child :message="message" @update:message="handleUpdate"></child>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const message = ref('');

function handleClick() {
  message.value = '这是父组件发送给子组件的消息';
}
// value为子组件传递的值
function handleUpdate(value) {
// 重新赋值并渲染到页面中
  message.value = value;
}
</script>

子传父

<template>
    <div>
      <h2>子组件</h2>
      <p>父组件传递的消息：{{ message }}</p>
      <button @click="handleClick">发送消息给父组件</button>
    </div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits } from 'vue';
  // props获取参数名
  const props = defineProps({
    message: String
  });
  // emits获取事件名
  const emits = defineEmits([
    'update:message',
  ]);
  
  function handleClick() {
  // 第一个参数为事件名，第二个参数为传递的值
    emits('update:message','这是子组件发送给父组件的消息');
  }
  </script>

注意事项：
在 Vue 3 中使用 props 和 emit，需要注意以下几点：

1. 在使用 props 时，需要使用 defineProps 函数来定义组件的属性列表。这个函数接收一个对象作为参数，其中每个属性都对应了组件的一个属性，并指定了其类型、默认值等信息。同时，需要在组件的选项中声明 props 选项，将其设置为 null，以告诉 Vue 不再使用旧的 props 语法。

2. 在使用 emit 时，需要使用 defineEmits 函数来定义组件的事件列表。这个函数接收一个数组作为参数，其中每个元素都是一个事件名称。在组件的选项中声明 emits 选项，将其设置为 null，以告诉 Vue 不再使用旧的 $emit 方法。

3. 在组件中使用 props 和 emit 时，需要在 setup 函数中引入 getCurrentInstance 函数，并从中获取 props 和 emit 对象。在模板中使用 props 时，需要使用解构赋值语法将其解构为单独的变量；在触发事件时，需要使用 emit 函数并传递事件名称和数据。

4. 在使用 props 和 emit 时，需要注意它们是只读的。也就是说，不能在子组件中直接修改 props 的值，而需要通过向父组件触发事件并传递数据的方式来进行通信。如果需要在子组件中修改数据，应该使用 ref 或 reactive 来定义响应式数据，并通过 emit 函数将修改后的数据传递给父组件进行处理。

总之，在使用 props 和 emit 时，需要了解其在 Vue 3 中的新语法和用法，并遵循最佳实践来编写可维护、可扩展的组件代码。