Vue3中props和emit的使用方法详解

下面我会详细讲解“Vue3中props和emit的使用方法详解”的完整攻略。

1. props的使用方法

1.1. 父组件如何向子组件传值？

在Vue3中，可以使用props来实现父组件向子组件传递数据。具体步骤如下：

1. 在子组件中定义需要传入的属性名以及默认值(可选)。

<!-- 子组件中定义props -->
<template>
  <div>{{ label }}</div>
</template>

<script>
  export default {
    props: {
      label: {
        type: String,
        default: 'default label'
      }
    }
  }
</script>

1. 在父组件中引用子组件，同时将需要传递的属性作为子组件的属性传入。

<!-- 父组件中引用子组件并传递属性 -->
<template>
  <div>
    <my-component label="hello"></my-component>
  </div>
</template>

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

  export default {
    components: {
      MyComponent
    }
  }
</script>

在上述示例中，在父组件中引入了子组件my-component，并且将label作为一个属性传递给了子组件，子组件通过props接受并使用了传入的值。

1.2. 如何验证props的类型和取值范围？

在实际开发中，我们需要对props进行类型验证，以确保传递的属性值符合我们的预期。Vue3中支持通过type属性设置允许的数据类型，并且也支持设置属性的取值范围。具体步骤如下：

1. 在子组件中定义props时，使用type设置数据类型，使用validator验证属性值的范围：

<!-- 子组件中定义props -->
<template>
  <div>{{ label }}</div>
</template>

<script>
  export default {
    props: {
      label: {
        type: String,
        // 定义取值范围
        validator: function (value) {
          return ['default', 'warn', 'error'].indexOf(value) !== -1
        }
      }
    }
  }
</script>

在上面的示例中，label属性的类型被设置为String，同时使用validator方法来判断传入的属性值是否符合定义的取值范围。

1. 在父组件中传递label属性时，必须满足定义的数据类型和取值范围：

<!-- 父组件中引用子组件并传递属性 -->
<template>
  <div>
    <my-component label="default"></my-component>
    <my-component label="warning"></my-component> <!-- 报错 -->
  </div>
</template>

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

  export default {
    components: {
      MyComponent
    }
  }
</script>

在上面的示例中，第二个my-component的label属性赋值为warning，而这个值不在validator方法中定义的取值范围中，会导致报错。

2. emit的使用方法

除了props，Vue3中还提供了emit方法来实现从子组件向父组件传递数据。具体步骤如下：

2.1. 子组件如何向父组件传值？

1. 在子组件中定义需要传递的事件名，并且使用$emit方法触发该事件。

<!-- 子组件中定义事件 -->
<template>
  <button @click="onClick">Click me</button>
</template>

<script>
  export default {
    methods: {
      onClick() {
        this.$emit('click-me', 'hello')
      }
    }
  }
</script>

在上面的示例中，点击按钮后会触发onClick方法，并且使用$emit方法触发了名为click-me的事件，并且传递了一个参数'hello'。

1. 在父组件中监听子组件的事件，并且使用$event参数获取子组件传递的参数。

<!-- 父组件中监听子组件事件 -->
<template>
  <div>
    <my-component @click-me="handleClick"></my-component>
  </div>
</template>

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

  export default {
    components: {
      MyComponent
    },
    methods: {
      handleClick(msg) {
        console.log(msg) // 输出: 'hello'
      }
    }
  }
</script>

在上面的示例中，父组件中监听到了子组件触发的click-me事件，并且使用handleClick方法接受了子组件传递的参数msg，这里输出的值就是之前子组件使用$emit方法传递的参数'hello'。

2.2. $emit的使用场景

通常情况下，我们的子组件会被多个父组件引用，如果使用props来传递参数，会导致父组件层层传递，而使用$emit方法就可以很方便地在子组件中触发事件，让多个父组件监听并且获取到子组件传递的参数值。

比如，在一个在线商城的应用程序中，我们需要在多个地方使用购物车功能，这时候就可以将购物车组件编写成独立的子组件，然后在多个地方引用，并且使用$emit方法来触发购物车数量的变化事件，在多个父组件中监听该事件并更新购物车数量。这种做法可以大大简化父子组件之间的传值过程，同时提高组件的可复用性。