Question

我有一个名为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>

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

Answer 2

让我们从你的测试数据开始（稍微清理）让我们说你有两个按钮，因为你好像以后想要这样做。我还不确定保存的内容：＆＃34; show＆＃34;应该做的 - 所以我尽力给出一个灵活的例子。

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

不要说你的组件中有一个名为＆＃34; controls＆＃34;

的testdata

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

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

我希望这会有所帮助。

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

2 个答案: