vue静态绑定props和动态绑定props代码

Vue.js 中的静态绑定 Prop (属性) 和动态绑定 Prop 主要有以下区别：

**静态绑定 Props：**
静态绑定的 Prop 是在组件定义时直接声明的，并且在数据绑定时不需要特殊的语法。例如，在 Vue 组件模板里，你可以像下面这样使用：

<child-component prop1="someValue" prop2="anotherValue"></child-component>

在 `child-component` 组件内部，可以像处理本地数据一样访问这些 Prop：

export default {
  props: {
    prop1: String,
    prop2: Number
  },
  //...
}

在这里，`prop1` 和 `prop2` 都是预设的数据类型，如果传递的值不符合类型，则会触发警告。

**动态绑定 Props：**
动态绑定 Prop 则通常通过 v-bind 或者 : 关键字来实现，允许在运行时更改 Prop 的值。比如：

<child-component :prop1="dynamicValue1" :prop2="dynamicValue2"></child-component>

然后在 JavaScript 中设置动态值：

data() {
  return {
    dynamicValue1: 'dynamic',
    dynamicValue2: 10
  };
},
//...

动态绑定的优点在于灵活性更高，可以根据需要在运行时更新 Prop 的值。