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

您的代码运行完美！您只是忘记在模板中添加反引号而不是单引号。使用反引号，您可以插入换行符。用单引号或双引号引起来，您必须将所有内容都写在一行上：）

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>

VueJS组件之间的通信

1 个答案: