Vue组件通信
我正在寻找两个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组件自包含值并发出统计数据，即字符数的值，然后由文本统计组件观察到。
回答 2
Stack Overflow用户
发布于 2018-12-09 23:14:57
我已经写了一个包含四个示例的代码片段:您的原始应用程序、一个执行相同任务的简单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>
Stack Overflow用户
发布于 2018-12-10 00:15:46
您可以为textarea的值创建一个“模型”，并使用下面的方法https://vuejs.org/v2/guide/components-props.html将该模型提供给第二个component
https://stackoverflow.com/questions/53693171
复制相似问题
腾讯云开发者
