动态创建道具答案

【问题标题】：Dynamically Create Props动态创建道具
【发布时间】：2020-06-23 05:40:09
【问题描述】：

如何从 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 的内部 init 函数，但我无法弄清楚为什么 props 没有设置。

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

【问题讨论】：

你可以访问vm.$attrs
@Estradiaz 我不确定如何使用 vm.$attrs 设置道具
简短的回答是检查 github vue src，但基本上所有未在 props 中分配的内容都将保留在 attrs 中，因此您可以在运行时获取它们并将它们设置为 vm 实例等，但请检查如何道具在源代码中工作；）
github.com/vuejs/vue/blob/… 最后是所有事情发生的地方
好吧，嗯，你的应该真的有用吗？？

标签： vue.js vue-props

【解决方案1】：

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

Vue.mixin({
  props: {
    name: {
      type: String
    },
    age: {
      type: Number
    },
    gender: {
      type: String
    }
  }
})

【讨论】：

道具需要生成，所以我需要从函数中调用它

【解决方案2】：

正如你注意到的，我提到的第一条评论是：关于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])

希望这会有所帮助；）

【讨论】：