0

如何从 vue 中的 mixin / 生命周期钩子动态创建道具？

我尝试了以下方法：

function install(Vue, Options) {
    Vue.mixin({
        beforeCreate: function() {
            this.$options.props = {
                name: {
                    type: String
                },
                age: {
                    type: Number
                },
                gender: {
                    type: String
                }
            }
        }
    })  
}

const PropEditor = {install}
module.exports = PropEditor

但上面的代码不起作用。我也尝试过使用 this.props = {... 这也不起作用。

我已经遍历了调试器中的每一行，并仔细查看了 vue 的内部初始化函数，但我无法弄清楚为什么 props 没有设置。

我想动态编辑道具的原因是我想创建一个插件，允许我们使用更高级的道具定义语法并对道具本身进行更严格的验证。这样做的方式是在组件上设置另一个属性，例如输入，然后在 beforeCreate 中对其进行处理以创建 props 属性。

4

2 回答 2

0

就像你注意到的，我的第一条评论提到：它的关于vm.$attrs：

beforeCreate(){
  this.$options.props = {propName: {}};
  this.$options.propsData = this.$attrs;
}

但请注意，您需要从 attrs 中删除这些道具以与 vue 保持一致，例如：

Object.keys(this.$options.props).forEach(key => this.$attrs.hasOwnProperty(key) && delete this.$attrs[key])

希望这可以帮助 ;）

于 2020-06-24T21:29:25.663 回答
0

不要尝试在中添加道具，而是在您的 mixin 对象中beforeCreate声明：props

Vue.mixin({
  props: {
    name: {
      type: String
    },
    age: {
      type: Number
    },
    gender: {
      type: String
    }
  }
})
于 2020-06-23T05:48:08.917 回答