Связь между компонентами VueJS

Question

Я занимаюсь разработкой пользовательских компонентов для vuejs и хочу повторно использовать один компонент в другом, как я могу управлять дочерним компонентом состояния от родительского?

Я пытаюсь найти правильный способ связи между компонентами и получилситуация, когда компонент пользовательского ввода не меняет значение.Например, когда я набираю некоторый текст на входе, текст изменяется в обоих местах ({‌{testData}} и input), но когда я нажимал кнопку, я ожидал, что значение также изменится в обоих местах, ноэто не работаетМожет ли кто-нибудь посмотреть приведенный ниже код и объяснить, что я делаю неправильно?

<div id="app">
  <custom v-model="testData">content</custom>
  {‌{testData}}
</div>

Vue.component('customInput', {
    template: '
    <div>
    <input type="text" :value="textValue" @input="doEvent($event)">
  </div>',
  props: ['value'],
  data: function() {
    return {
        textValue: this.value
    };
  },
  methods: {
    doEvent(event) {
      this.$emit("input", event.target.value);
    }
  }
});

Vue.component('Custom', {
    template: '
<div>
    <button @click="changeData()">Chnage Data</button>
    <custom-input v-model="textValue" @input="doEvent()"/>
  </div>',
  props: ['value'],
  data: function() {
    return {
      textValue: this.value
    };
  },
  methods: {
    doEvent() {
      this.$emit("input", this.textValue);
    },
    changeData() {
        this.textValue = 'Data has chaged';
      this.doEvent();
    }
  }
});

new Vue({
    el: '#app',
    data: {
     testData: "test data"
    }
});

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

Answer 1

Ваш код работал отлично!Вы просто забыли добавить в шаблоне кавычки вместо одинарных кавычек.Используя обратные пометки, вы можете вставлять новые строки.С одинарными или двойными кавычками вы должны написать все в oneline:)

Vue.component('customInput', {
    template: `
    <div>
      <input type="text" :value="textValue" @input="doEvent($event)">
    </div>`,
  props: ['value'],
  data: function() {
    return {
        textValue: this.value
    };
  },
  methods: {
    doEvent(event) {
      this.$emit("input", event.target.value);
    }
  }
});

Vue.component('Custom', {
    template: `
  <div>
    <button @click="changeData()">Chnage Data</button>
    <custom-input v-model="textValue" @input="doEvent()"/>
  </div>`,
  props: ['value'],
  data: function() {
    return {
      textValue: this.value
    };
  },
  methods: {
    doEvent() {
      this.$emit("input", this.textValue);
    },
    changeData() {
        this.textValue = 'Data has chaged';
      this.doEvent();
    }
  }
});

new Vue({
    el: '#app',
    data: {
     testData: "test data"
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <custom v-model="testData">content</custom>
  {{testData}}
</div>