Переменная связана в двух компонентах vue js

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.