组件定义中的组件绑定而不是标记？答案

【问题标题】：Component bindings in the Component definition instead of markup?组件定义中的组件绑定而不是标记？
【发布时间】：2018-07-06 11:44:33
【问题描述】：

在定义 Vue.js 组件时，我读到您在标记中定义绑定，如下所示：

<div id="app">

  <todo-item v-bind:item="todo" v-bind:key="todo.id" v-bind:class="[item.someValue]"></todo-item>

</div>

<script>
  Vue.component('todo-item', {
    props: ['todo'],
    template: '<div>{{ todo.text }}</div>'
  })
</script>

是否可以在组件的 JavaScript 定义中而不是在标记中定义 v-bind？我问是因为在某些情况下，我的 HTML 中有几十个地方使用了相同类型的组件。所以我只是在各处重复绑定定义。似乎我应该能够在我的 HTML 中使用 <todo-item></todo-item> 并完成它。

我尝试在组件模板中添加绑定，但除非我的语法关闭，否则这似乎不起作用。我似乎在文档中看不到任何方法。

有可能吗？如果不是，为什么？似乎它鼓励的是 DRY 的反面（不要重复自己）。

【问题讨论】：

可能我没听懂你的意思，你的意思是因为所有todo-item都使用相同的道具，你更喜欢使用<todo-item></todo-item>而不是<todo-item v-bind:item="..." ...></todo-item>？
我认为是的。我也是 Vue 的新手，所以也许我误解了你为什么会或不想这样做？我的想法是，如果一个组件在我使用的任何地方都是相同的，为什么我要一遍又一遍地定义相同的绑定？
如果每个组件中的所有道具都完全相同，你甚至不需要使用props，只需使用data即可。

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

您可以在组件的定义中使用data 属性。

该示例使用新的“allprop”属性获取完整对象，然后在数据函数中根据需要构造对象：

<div id="app">

    <todo-item v-bind:allprop="todo"></todo-item>

</div>

<script>
    Vue.component('todo-item', {
        props: ['allprop'],
        template: '<div>{{ allprop.text }}</div>',
        data: function() {
            return {
                key: this.allprop.id,
                class: [this.allprop.someValue],
                ... more ...
            };
        }
    });
</script>

工作示例：https://jsfiddle.net/fjpqz387/132/

【讨论】：

嗯好吧。我仍在试图围绕道具的目的来解决问题。在您的示例中，我在哪里定义 this.allprop.someValue 的值？在数据对象上？