Как использовать тот же компонент множество раз, но с разными данными во Vue?

Question

[postya]

Имеется дочерний компонент, который я внедряю в родительский комопнент множество раз в разных местах.
Нужно,чтобы компонент был тот же, но менялись данные в разных местах приложения этого же компонента

Как можно использовать один и тот же компонент в раных местах, н ос разными данными?

Ожидаемый результат:
Компонент появляется в рзных метсах приложения и показывает данные

Текущий результат:
Появляется ошибка:

Connector.vue - error dublicated key 'input-output' vue/no-dupe-keys

Дочернйи компонент Connector.vue:

<template>
  <div class="connector">
    <p>{{input_output}}</p>
  </div>
</template>

<script>
  export default {
    name: "Connector",
    data() {
      return {
        input_output:"",        
      }
    },
    props: {
      input_output: String
    }
  }
</script>

Родительский компонент Module.vue:

<template>
<div class="module">
<Connector class="connector con1" v-bind:input_output="input1" :key="input1"/>
    <Connector class="connector con2" v-bind:input_output="input2" :key="input2"/>
    <Connector class="connector con3" v-bind:input_output="output1" :key="output1"/>
    <Connector class="connector con4" v-bind:input_output="output2" :key="output2"/>
</div>
</template>

<script>
  import Connector from "components/Connector";
  export default {
    name: "Module",
    components: {Connector},
    data() {
      return {
        input1: 'input',
        input2: 'input',
        output1: 'output',
        output2: 'output'
      }
    }
  }
</script>

Answer 1

[Rsa97]

Так вы один и тот же параметр указали во входных свойствах (props) и в данных компонента (data). Уберите его из данных.

Comments

[postya]

Что нужно убрать из чего?

[postya]

можете написать пример использования одного и того же компонента,но чтобы родитель мог данные разные поменять для компонента в разных местах?

[Gennady S]

postya, если у Вас есть компонент со свойствами, то при обращении к component.property Vue прозрачно подставляет поля из data {} — наблюдаемых свойств, и props {} — наблюдаемых входных параметров. Соответственно они должны иметь разные имена data { property: 123 } , props { property: 123 } — ошибка. Ведь для component.property — поле property дублируется. Это в документации хорошо описано, стоит прочитать ее всю от корки до корки.

Answer 2

[postya]

благодаря наводке Rsa97 я нашёл решение:

Дочерний компонент Connector.vue:

<template>
  <div class="connector">
    <p>{{connector}}</p>
  </div>
</template>

<script>
  export default {
    name: "Connector",
    data() {
      return {
        sections: {
          length: ""
        },
      }
    },
    props: {
      connector: String
    }
  }
</script>

Родительский компонент Module.vue:

<template>
  <div class="module">
       <Connector class="connector con1" :connector="input1"/>
    <Connector class="connector con2" :connector="input2"/>
    <Connector class="connector con3" :connector="output1"/>
    <Connector class="connector con4" :connector="output2"/>
  </div>
</template>

<script>
  import Connector from "components/Connector";
  export default {
    name: "Module",
    components: {Connector},
    data() {
      return {
        input1: 'input1',
        input2: 'input2',
        output1: 'output1',
        output2: 'output2'
      }
    }
  }
</script>

Comments

[Gennady S]

Так Rsa97 не наводку дал, а ответ, явно указав, что данные (data) компонента перекрывают его входные данные (props). Его ответ — решение Вашей проблемы. "Благодаря наводке" : )

И еще, input1, input2 — старайтесь сразу давать осмысленные имена полям. Это еще не раз аукнется в будущем.

[postya]

Gennady S, да, это я понял, я пока просто для примера написал)

[Gennady S]

postya, отметьте ответ Rsa97 ответом ;)

Answer 3

[Алексей Ярков]

А чего вы ждали? У вас дублируется key, так как input1 и input2 (output1 и output2) имеют одинаковое значение.

Comments

[postya]

Значение полей input1, input2, output1, output2 будет меняться, это я чисто для примера написал дефолтное значение