时间戳

首页 > 解决方案 > 以编程方式向 Vue 组件添加属性

javascript - 以编程方式向 Vue 组件添加属性

问题描述

假设有一个组件在设计时<x>不知道某些属性a，但它应该被任意配置和支持<x>。

const env = { props: { a: Number } }

<x :env="env" :a="38">

这有可能吗？

标签： javascriptvue.jsvuejs2vue-component

解决方案

如果您没有在组件中注册道具，x例如

//x.vue
<script>
  export default {
    props : ['a']
  }
</script>

那么组件将不知道您传递给它的道具的任何信息。您传递给组件但未注册的道具将是未定义的。

但是，将完整的对象作为 prop 传递给组件不是问题，例如

/* 
   const obj = {
     a : 1,
     b : 2,
     c : 3
   }
*/

<x :dynprop="obj" />

<script>
  export default {
    props : ['dynprop'],
    mounted() {
      console.log(dynprop.a);
      
      // 1
    }
  }
</script>

请参阅官方 Vue 文档中将对象作为道具传递： https ://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object

这可能是你最好的选择，因为

Vue 不允许动态地将新的根级响应属性添加到已创建的实例中。

推荐阅读