使用可重用组件时如何更改文本区域的值？

Question

当满足将文本输入到不同组件文本区域的要求时，我需要更改特定组件文本区域内的文本。我尝试创建一个简单的示例来说明该问题。我的主要问题是定位正确的组件并编辑动态显示的文本。

父组件

<template>
    <reuseableComponent 
        input-type="textarea" v-model="Example1">
    </reuseableComponent>
    <reuseableComponent 
        input-type="textarea" v-model="Example2">
    </reuseableComponent>
<template>

可重复使用的组件

<textarea
    v-model='taValue' @input='$emit("input", taValue)'>
</textarea>

exampleMethod() {
    if(value) {
        //change text in Example2 textarea instance.
    }
}

Answer 1

如果我猜对了，那么如果第一个组件的值符合特定条件，您将尝试更改第二个组件的值。所以，如果是这样的话，我已经制作了一个工作小提琴，您可以在这里找到它，通过在第一个可重用文本区域中输入Foo，您将在第二个文本区域中得到Bar。

window.Event = new Vue();

Vue.component('my-textarea', {
	template: `
  	<textarea :value="value" 
    		  @input="updateValue($event.target.value)" 
                 :placeholder="placeholder"
    		  ref="input"
    >
    </textarea>`,
  props: {
  	value: { default: '' },
        placeholder: { default: '' }
  },
  methods: {
  	updateValue(value) {
      // adding v-model support to this reusable component
      this.$refs.input.value = value;
      this.$emit('input', value);
          
       // Firing an event via Event bus to notify sibling reusable component
       Event.$emit('valueChanged', this._uid, value);
     }
  },
  
  mounted() {
        // Listening for 'valueChanged' event
  	Event.$on('valueChanged', (id, value) => {
    	if (id != this._uid) {
      	    if (value === 'Foo') {
        	this.$refs.input.value = 'Bar';
        }
      }
    }); 
  }
  
});

new Vue({
  el: '#app',
  data() {
      return {
    	text1: '',
        text2: ''
    }
  }

});

<div id="app">
  <my-textarea v-model="text1" placeholder="Type Foo here"></my-textarea>
  <my-textarea v-model="text2"></my-textarea>
</div>

https://jsfiddle.net/mrzerehpoosh/Lnkrjqy6/