Vue3中props和emit如何使用

props的使用

在Vue3中，props是用来接收组件的父组件传递过来的数据。Vue3中的props相比Vue2有一些改动，它是由"prop"新的函数API代替的。在Vue3中，我们可以使用defineComponent()来定义一个组件，并在组件的选项对象中使用props接收父组件传递的数据。

  
    import { defineComponent } from 'vue';

    export default defineComponent({
      props: {
        msg: {
          type: String,
          default: 'hello world'
        }
      },
      // 组件的其它选项
      ...
    });
  

在上面的props中，我们定义了一个msg属性，它的类型是string，默认值是"hello world"。如果父组件没有传递msg属性，则会使用默认值。如果父组件传递的msg属性不是字符串类型，则会在控制台中输出一条警告信息。

emit的使用

Vue3中的emit用来向父组件派发自定义事件。与props不同的是，我们不需要在组件的选项中显式地声明emit，而是通过emits选项数组来指定可以被派发的事件名称。在组件中使用$emit来派发事件，并传递数据给父组件。

  
    import { defineComponent } from 'vue';

    export default defineComponent({
      emits: ['my-event'],
      ...,
      methods: {
        handleClick() {
          const data = 'some data to pass to parent';
          this.$emit('my-event', data);
        }
      }
    });
  

在上面的代码中，我们通过emits选项数组声明了可供派发的事件名称为"my-event"。在组件中使用methods选项来定义处理函数，并在处理函数中使用$emit来向父组件派发my-event事件，并传递一些数据。

在子组件中使用props

在子组件中，我们可以通过props选项来接收父组件传递的数据，并进行相应的处理操作。下面是一个例子，展示了组件中如何使用props,并在模板中显示props数据：

  
    import { defineComponent } from 'vue';

    export default defineComponent({
      props: {
        msg: String
      },
      ...,
      template: `
        

          
{{msg}}
        
      `
    });
  

在上面的代码中，我们在props选项中定义了一个msg属性，它的类型是string。在模板中，我们通过{{msg}}来显示msg属性的值。

在父组件中使用emit

在父组件中，我们可以通过在子组件中绑定自定义事件来监听子组件中使用$emit派发的事件，并执行相应的处理函数。下面是一个例子：

在上面的代码中，我们在父组件的模板中引入子组件，并绑定了一个名为"my-event"的自定义事件，当子组件中派发my-event事件时，会执行handleMyEvent方法，并接收从子组件传递过来的数据。