如何在使用可重用组件时更改textarea的值？

Question

当需要满足将文本输入到不同的组件textarea时，我需要更改特定组件textarea内的文本。我试图创建一个简单的例子来展示这个问题。我的主要问题是针对正确的组件并编辑其动态显示的文本。

父组件

<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

如果我这样做是正确，你想，如果第一组件的值相匹配的特定标准，以改变第二组件的价值。所以，如果是这样的话，我已经产生了一个工作小提琴，你可能会发现它here，它通过在第一个可重用的textarea中输入Foo您将获得酒吧在第二textarea。

window.Event = new Vue(); 
 

 
Vue.component('my-textarea', { 
 
\t template: ` 
 
    \t <textarea :value="value" 
 
    \t \t @input="updateValue($event.target.value)" 
 
       :placeholder="placeholder" 
 
    \t \t ref="input" 
 
    > 
 
    </textarea>`, 
 
    props: { 
 
    \t value: { default: '' }, 
 
     placeholder: { default: '' } 
 
    }, 
 
    methods: { 
 
    \t 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 
 
    \t Event.$on('valueChanged', (id, value) => { 
 
    \t if (id != this._uid) { 
 
     \t  if (value === 'Foo') { 
 
     \t this.$refs.input.value = 'Bar'; 
 
     } 
 
     } 
 
    }); 
 
    } 
 
    
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data() { 
 
     return { 
 
    \t 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/