Vue-根据属性有条件地绑定数据

Question

我有一个包含子组件的组件，该子组件具有一些我们可以绑定的属性。喜欢：

<template>
  <div>
    <Child :bar="foo"></Child>
  </div>
</template>
<script>
export default {
  name: 'Parent',
  props: ['foo'],
}
</script>

现在，我想有条件地绑定Child组件的属性“ bar”。例如，仅当父组件的'foo'属性不是undefined时，我才想绑定子组件的'bar'属性，我该怎么做？

---

针对那些建议我使用v-if指令的家伙的更新：

我认为，

使用v-if指令 IS N'T 是理想的解决方案。当条件变得复杂且条件绑定属性的数量变大（如5）时，情况将成倍增长并导致 VERY LONG if-elseif-else链。很丑，所以不。

我想知道是否有类似REACT的方法来解决此问题-仅使用vdom并进行实用的绑定。但我不知道是否可以在render函数中执行此操作，因为我没有发现任何可以与子组件上的v-bind指令执行相同功能的API函数。

Answer 1

您可以使用v-if：

<div v-if="foo">
  <Child :bar="foo"></Child>
</div>
<div v-else>
  <Child></Child>
</div>

但是，我建议您不要有条件地渲染。这是因为您可以检查bar道具是否为undefined。

---

更新：

我发现v-bind与对象在您的情况下很有用：

<Child v-bind="{bar: foo || '' }"></Child>

此外，您可以尝试使用这种方式-ES6功能：（但我不确定是否可以使用此功能）

<Child v-bind="...(foo && {bar: foo})"></Child>