vue3 获取props的值|极客教程

vue3 获取props的值

在Vue.js 3中，我们可以通过props属性来从父组件传递数据到子组件。在子组件中，我们可以使用Setup函数来获取props的值。本篇文章将详细介绍如何在Vue3中获取props的值。

1. 在子组件中定义props

首先，我们需要在子组件中定义props。我们可以使用defineProps函数来定义props，然后将props传递给Setup函数。

// ChildComponent.vue

<script>
import { defineComponent, defineProps } from 'vue';

export default defineComponent({
  props: {
    prop1: String,
    prop2: Number
  },
  setup(props, { slots }) {
    // 使用props.prop1和props.prop2来获取props的值
    console.log(props.prop1);
    console.log(props.prop2);

    return {
      // 返回props
      prop1: props.prop1,
      prop2: props.prop2
    };
  }
});
</script>

在上面的示例中，我们定义了两个props：prop1和prop2，分别是String类型和Number类型。在Setup函数中，我们可以通过props.prop1和props.prop2来获取props的值，并且可以将props传递给子组件的模板中。

2. 在父组件中传递props

在父组件中，我们可以通过在子组件上使用v-bind来传递props。下面是一个简单的父组件的示例：

// ParentComponent.vue

<template>
  <ChildComponent :prop1="'Hello'" :prop2="123" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

在上面的示例中，我们在ChildComponent上使用了v-bind来传递了prop1和prop2的值。这样子组件就可以接收到这两个props的值。

3. 在子组件中使用props

在子组件中，我们可以通过Setup函数中的props参数来获取props的值。我们可以直接使用props.prop1和props.prop2来访问传递过来的props值。

// ChildComponent.vue

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    prop1: String,
    prop2: Number
  },
  setup(props, { slots }) {
    console.log(props.prop1); // 'Hello'
    console.log(props.prop2); // 123

    return {
      prop1: props.prop1,
      prop2: props.prop2
    };
  }
});
</script>

在上面的示例中，我们通过props.prop1和props.prop2分别获取了prop1和prop2的值。这样就可以在子组件中使用传递过来的props了。