vue props传参

Vue 中的 props 是用来传递父组件数据到子组件的方式，可以通过在子组件中声明 props 来接收父组件传递的数据。在父组件中使用子组件时，可以通过 v-bind 指令将数据传递给子组件的 props。例如： <my-component :prop-name="data"></my-component>。在子组件中，可以通过 this.propName 来访问父组件传递的数据。

相关问题

vue3 props传参

在Vue3中，可以使用`defineProps`函数来声明props。在`<script setup>`标签中，使用`const props = defineProps({...})`来声明props，其中`{...}`是一个对象，用于指定props的名称、类型、是否必须、默认值和校验规则等。例如：

<script setup>
  import { defineProps } from 'vue'

  const props = defineProps({
    message: {
      type: String,
      required: true,
      default: 'Hello World',
      validator: (value) => {
        return value.length <= 10
      }
    }
  })
</script>

在模板中，可以使用`{{ props.message }}`来访问props的值。注意，props是只读的，不能在子组件中修改props的值。如果需要向父组件传递数据，可以使用`$emit`方法来触发一个自定义事件，并将数据作为参数传递给父组件。

vue2props传参

在Vue.js 2.x版本中，`props`是“属性”（Properties）的缩写，它用于从父组件向子组件传递数据。当你需要在子组件中使用父组件的数据时，可以将它们作为props声明并接收。这里是一个基本的用法示例：

// 父组件 (Parent.vue)
<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from the parent!'
    }
  }
}
</script>

// 子组件 (ChildComponent.vue)
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: {
    // 使用冒号(:)指定这是一个prop
    message: {
      // 类型校验（可选）
      type: String,
      // 默认值（可选）
      default: ''
    }
  }
}
</script>

在这个例子中，`parentMessage`是父组件的数据，通过`:message`绑定到子组件的`message` prop上。当子组件接收到这个prop后，就可以在模板内直接使用`{{ message }}`显示数据。