Question

我正在寻找两个Vue组件的简洁示例。第一部分应包含文本输入或文本区域。第二个组件显示一个字符计数器。我希望第一个组件发出更改事件，第二个组件应侦听那些事件并显示其计算值（字符数）。我是Vue的新手，正在尝试把最好的方法实现这一功能。在纯JavaScript中，这似乎很简单，但是用Vue的方式对我来说还不太清楚。谢谢。

这是我在JavaScript中的操作方式：

这是文本区域：

<textarea id="pagetext" name="pagetext"
                          onChange="characterCount();"
                          onKeyup="characterCount();">Type here</textarea>

这是JavaScript：

function characterCount()
{ 
        var characters=document.myForm.pagetext.value.length;
        document.getElementById('charcounter').innerHTML=characters+"";
}

我对Vue的关注是传递整个价值...出于性能原因，这似乎不太理想。我可能希望我的文本编辑Vue组件自包含该值并发出统计信息，即字符计数的值，然后文本统计信息组件会观察到该值。

Answer 1

我用四个示例编写了一个片段：您的原始示例，一个做同样事情的简单Vue应用（无组件）以及两个由父母协调的具有两个组件的应用。

简单的Vue应用实际上比纯JavaScript应用更简洁，我认为这表明了拥有框架的原因：您的视图不能充当程序数据的存储，您必须从中存储数据出来。

在最后一个示例中，父级仍然拥有pageText，但是将其向下传递给my-textarea组件。我喜欢将发射隐藏在计算的可设置表的抽象后面，以便元素可以使用v-model。任何更改都会向上传递到父级，父级会更改pageText，并向下传播到组件。

我认为您对性能的关注属于过早优化的领域，但是有可能根本不将文本内容用作数据，而只关心长度。第四个例子做到了。 emitLength可以使用event.target.value.length，但是我想在mounted中使用它来正确初始化长度，所以我使用了ref。

function characterCount() {
  var characters = document.myForm.pagetext.value.length;
  document.getElementById('charcounter').innerHTML = characters + "";
}
new Vue({
  el: '#app',
  data: {
    pageText: 'Type here'
  }
});

new Vue({
  el: '#app2',
  data: {
    pageText: 'Type here'
  },
  components: {
    myTextarea: {
      props: ['value'],
      template: '<textarea name="pagetext" v-model="proxyValue"></textarea>',
      computed: {
        proxyValue: {
          get() {
            return this.value;
          },
          set(newValue) {
            this.$emit('input', newValue);
          }
        }
      }
    },
    textLength: {
      props: ['value'],
      template: '<div>{{value}}</div>'
    }
  }
});

new Vue({
  el: '#app3',
  data: {
    textLength: null
  },
  components: {
    myTextarea: {
      template: '<textarea ref="ta" name="pagetext" @input="emitLength">Type here</textarea>',
      methods: {
        emitLength() {
          this.$emit('change', this.$refs.ta.value.length);
        }
      },
      mounted() {
        this.emitLength();
      }
    },
    textLength: {
      props: ['value'],
      template: '<div>{{value}}</div>'
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<form name="myForm">
  <textarea id="pagetext" name="pagetext" onChange="characterCount();" onKeyup="characterCount();">Type here</textarea>
</form>
<div id="charcounter"></div>

<div id="app">
  <h1>Vue (simple)</h1>
  <form>
    <textarea name="pagetext" v-model="pageText"></textarea>
  </form>
  <div>{{pageText.length}}</div>
</div>

<div id="app2">
  <h1>Vue (with components)</h1>
  <form>
    <my-textarea v-model="pageText"></my-textarea>
  </form>
  <text-length :value="pageText.length"></text-length>
</div>

<div id="app3">
  <h1>Vue emitting stats</h1>
  <form>
    <my-textarea @change="(v) => textLength=v"></my-textarea>
  </form>
  <text-length :value="textLength"></text-length>
</div>

Answer 2

您可以使用以下方法https://vuejs.org/v2/guide/components-props.html

为值textarea创建一个“模型”，并将该模型提供给第二个component。

Vue组件通信

2 个答案: