VueJS 通过属性值将自定义属性传递给子组件答案

【问题标题】：VueJS pass custom property to child component via property valueVueJS 通过属性值将自定义属性传递给子组件
【发布时间】：2017-05-08 10:16:42
【问题描述】：

我有一个名为controls的组件：

<li class="controls__item" v-if="options[0].save == 'show'"> 
   <button class="btn" :options[0].saveAttr>Save</button>
</li>

我在呈现options 属性中定义的属性时遇到问题：

<controls :options='[{ save: "show", saveAttr: "sampleAttr='0' "}]'></controls>

这就是我想要实现的目标：

<button class="btn" sampleAttr='0'>Save</button>

【问题讨论】：

vuejs.org/v2/api/#v-bind

标签： vue.js vuejs2

【解决方案1】：

这不是 Vue 中绑定的正确语法。

如果要绑定的属性名称永远不会更改，则应在controls 组件中指定名称：

<li class="controls__item" v-if="options[0].save == 'show'"> 
  <button class="btn" :sampleAttr="options[0].saveAttr">Save</button>
</li>

只需更改选项以传递saveAttr 的值：

<controls :options='[{ save: "show", saveAttr: "0" }]'></controls>

如果属性的名称（或属性的数量）可以改变，那么你应该像这样将一个对象传递给v-bind 指令：

<li class="controls__item" v-if="options[0].save == 'show'"> 
  <button class="btn" v-bind="options[0].saveAttrs">Save</button>
</li>

然后为saveAttrs传入一个对象：

<controls :options='[{save : "show", saveAttrs: { sampleAttr: 0 }]'></controls>

【讨论】：

感谢您帮助我 :)

【解决方案2】：

让我们从您的测试数据开始（只是稍微清理一下）假设您有两个按钮，因为您以后似乎想这样做。我还不确定 save : "show" 应该做什么——所以我尽力给出一个灵活的例子。

[{
   'text': 'Save',
   'click': function() {  alert('save'); }
,{
   'text': 'Delete',
   'click': function() {  alert('delete'); }
}]

不能说您的组件中有名为“控件”的测试数据

<controls :options="[{'text': 'Save','click': function() {  alert('save'); },{'text': 'Delete','click': function() {  alert('delete'); }}]"> </controls>

正如我们所见，您的控件有一个名为 options 的属性。因此，您的组件代码应如下所示：

<template>
    <div class="controls">

        <li class="controls__item" v-for="control in options"> 
          <button class="btn" @click="control.click">{{ control.text }}</button>
        </li>

    </div>
</template>

<script>
    export default {
        props: ['options']
    }
</script>

您需要定义要在组件上绑定的道具（选项）。选项现在根据我们的测试日期绑定。由于它是一个数组，我们可以使用 v-for 来循环它。然后我们将给定的文本绑定为按钮内容，并将给定的点击函数绑定为点击事件。

我希望这会有所帮助。

【讨论】：