再利用可能なコンポーネントを使用しているときに、テキストエリアの値を変更するにはどうすればよいですか？

Question

異なるコンポーネントのテキストエリアにテキストを入力する要件が満たされている場合、特定のコンポーネントのテキストエリア内のテキストを変更する必要があります。私はこの問題を示す簡単な例を作成しようとしました。私の主な問題は、正しいコンポーネントを対象とし、動的に表示されるテキストを編集することです。

私は右のそれを得た場合は、最初のコンポーネントの値が一定の基準に一致する場合は、2番目のコンポーネントの値を変更しようとしている

<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を見つけるかもしれない作業フィドルを作りました。Fooを最初の再利用可能なテキストエリアに入力するとバーの2番目のテキストエリアに入ります。

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/