(1) 创建2个单文件组件Props.vue、Count.vue，分别表示父组件、子组件。 (2) 实现在子组件中声明props。 (3) 实现在父组件中静态、动态绑定props为子组件传递数据。 用vue

在Vue.js中，你可以按照以下步骤创建两个单文件组件：`Props.vue` 和 `Count.vue`，并实现props的声明和数据传递。

**1. 创建`Props.vue`（父组件）**

<!-- Props.vue -->
<template>
  <div>
    <Count :count="displayCount" />
    <button @click="incrementCount">增加计数</button>
  </div>
</template>

<script>
export default {
  name: "PropsComponent",
  components: { Count },
  data() {
    return {
      displayCount: 0,
    };
  },
  methods: {
    incrementCount() {
      this.displayCount++;
    },
  },
};
</script>

在这个父组件中，我们引入了名为`Count`的子组件，并通过`:count`属性将其`displayCount`数据传给子组件。同时，还有一个按钮，点击后会触发`incrementCount`方法改变`displayCount`。

**2. 创建`Count.vue`（子组件）**

<!-- Count.vue -->
<template>
  <div>子组件当前计数：{{ count }}</div>
</template>

<script>
export default {
  props: {
    // 声明接受的props名称
    count: {
      type: Number, // 类型校验
      required: true, // 是否必填
    },
  },
};
</script>

在子组件`Count.vue`中，我们声明了一个prop `count`，并指定了其类型为Number。当从父组件传递数据过来时，我们可以直接访问这个prop并显示在子组件中。

**3. 静态与动态绑定props**
静态绑定是指在组件实例创建时就确定了的props值，如上述例子所示。而动态绑定则是通过变量或表达式来传递props，这通常用于响应式的数据更新。

例如，如果你想让`displayCount`也支持动态变化，可以在父组件的模板中这样修改：

<!-- Props.vue (改版) -->
<template>
  <div>
    <Count :count="dynamicCount" />
    <button @click="incrementDynamicCount">动态增加计数</button>
  </div>
</template>

//...
methods: {
  incrementDynamicCount() {
    this.dynamicCount = this.displayCount + 1;
  },
}

这里我们添加了一个新的局部变量`dynamicCount`，并在`incrementDynamicCount`方法中动态更新它，然后通过`:count`绑定到子组件。