Question

在定义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>

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

我已尝试在组件模板中添加绑定，但除非我的语法关闭，否则它似乎无法正常工作。我似乎无法在文档中看到任何方法。

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

Answer 1

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

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

<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/

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

1 个答案: