Question

我只想多次使用独立组件：

<main-component>
   <other-component />
   <other-component />
</main-component>

我的其他组件中的变量有问题。在下面的代码中，我使用show var根据按钮单击显示或不显示内容。我只想显示单击的当前组件的段落

import otherComponent from '../../otherComponent'

// main component
export default {
name: 'main-component',
  components: {
    otherComponent
  },
  data () {
    return {
    }
  },
}

<template>
  <div>
     <other-component />
     <other-component />
  </div>
</template>

// other component

export default {
name: 'other-component',
  data () {
    return {
      show: false
    }
  },
  methods: {
    toggle(){
      this.show = !this.show
    }
}

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-show="show">1</p>
  </div>
</template

当我单击按钮时，将显示两个p。为什么呢

Answer 1

如果将组件相互嵌套，则需要使用插槽：https://vuejs.org/v2/guide/components-slots.html#ad。

以下代码可正确呈现：

<main-component>
  <other-component />
  <other-component />
</main-component>

您的main-component组件的模板中必须包含<slot />：

<template>
  <div>
    <slot />
  </div>
</template>

然后<slot />将被替换为...

<other-component />
<other-component />

...呈现时。这意味着main-component无需导入或对otherComponent进行任何引用。

我在CodeSandbox上有一个工作示例：https://codesandbox.io/embed/vue-template-gblx0。

变量链接到两个组件vue js

1 个答案: