vue defineprops

Vue 3中引入了一个新的特性，即`defineProps`。`defineProps`是一个用于定义组件属性的函数。它允许你在组件中声明需要从父组件传递的属性，并且提供了类型检查和默认值设置的功能。

使用`defineProps`函数，你可以在组件的`props`选项中定义属性，并指定它们的类型、默认值等。这样一来，当父组件传递属性给子组件时，Vue会自动进行类型检查，并且在没有传递对应属性时使用默认值。

下面是一个使用`defineProps`的示例：

// 子组件
const ChildComponent = {
  props: {
    message: String,
    count: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    // 使用props中定义的属性
    console.log(props.message);
    console.log(props.count);
  }
};

// 父组件
const ParentComponent = {
  template: `
    <div>
      <child-component :message="msg" :count="5" />
    </div>
  `,
  components: {
    ChildComponent
  },
  data() {
    return {
      msg: 'Hello Vue!'
    };
  }
};

在上面的示例中，子组件`ChildComponent`通过`props`选项定义了两个属性：`message`和`count`。其中，`message`的类型为字符串，而`count`的类型为数字，并且设置了默认值为0。

在父组件`ParentComponent`中，通过`:message="msg"`和`:count="5"`的方式将属性传递给子组件。子组件中可以通过`props`参数来访问这些属性。