Props

coerce Prop 的参数 移除

如果需要检查 prop 的值，创建一个内部的 computed 值，而不再在 props 内部去定义，例如：

props: {
  username: {
    type: String,
    coerce: function (value) {
      return value
        .toLowerCase()
        .replace(/\s+/, '-')
    }
  }
}

现在应该写为：

props: {
  username: String,
},
computed: {
  normalizedUsername: function () {
    return this.username
      .toLowerCase()
      .replace(/\s+/, '-')
  }
}

这样有一些好处：

• 你可以对保持原始 prop 值的操作权限。
• 通过给予验证后的值一个不同的命名，强制开发者使用显式申明。

升级方式

运行迁移工具找出包含 coerce 选项的实例。

twoWay Prop 的参数 移除

Props 现在只能单向传递。为了对父组件产生反向影响，子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。详见：

• 自定义组件事件
• 自定义输入组件 (使用组件事件)
• 全局状态管理

升级方式

运行 迁移工具，找出含有 twoWay 参数的实例。

v-bind 的 .once和.sync 修饰符 移除

Props 现在只能单向传递。为了对父组件产生反向影响，子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。详见：

• 自定义组件事件
• 自定义输入组件 (使用组件事件)
• 全局状态管理

升级方式

运行迁移工具找到使用 .once 和 .sync 修饰符的实例。

修改 Props 弃用

组件内修改 prop 是反模式 (不推荐的) 的。比如，先声明一个 prop ，然后在组件中通过 this.myProp = 'someOtherValue' 改变 prop 的值。根据渲染机制，当父组件重新渲染时，子组件的内部 prop 值也将被覆盖。

大多数情况下，改变 prop 值可以用以下选项替代：

• 通过 data 属性，用 prop 去设置一个 data 属性的默认值。
• 通过 computed 属性。

升级方式

运行端对端测试，查看关于 prop 修改的控制台警告信息。

根实例的 Props 替换

对于一个根实例来说 (比如：用 new Vue({ … }) 创建的实例)，只能用 propsData 而不是 props 。

升级方式

运行端对端测试，将会弹出 failed tests 来通知你使用 props 的根实例已经失效。