vue props组件 例子

当在Vue.js中使用props进行组件间的数据传递时，可以通过在父组件中定义props，并在子组件中接收和使用这些props数据。以下是一个简单的Vue组件示例，演示了如何使用props进行组件间的数据传递：

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      default: 'No description provided'
    }
  }
};
</script>

在这个例子中，我们定义了一个名为`MyComponent`的Vue组件。在组件的props选项中，我们定义了两个props：`title`和`description`。

- `title`是一个必需的String类型的props，父组件在使用`MyComponent`时必须传递一个字符串类型的值给它。
- `description`是一个String类型的props，它有一个默认值，默认值为'No description provided'。如果父组件没有传递该props，则会使用默认值。

在父组件中，可以使用`MyComponent`标签来使用这个子组件，并通过属性绑定的方式传递数据：

<template>
  <div>
    <my-component title="Hello Vue" description="This is a Vue component"></my-component>
  </div>
</template>

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

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

在这个例子中，我们在父组件中使用了`MyComponent`标签，并通过`title`和`description`属性传递数据给子组件。

总结起来，通过props可以在Vue组件间进行数据传递。父组件通过在子组件标签上绑定属性，子组件可以通过props接收并使用这些数据。这样可以实现组件的灵活复用和参数化。