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指令不是理想的解决方案。当条件变得复杂并且条件绑定属性的数量变得更大（如5）时，案例将呈指数级增长并导致非常长的if-elseif-else链。这很难看，所以不。

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

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>