재사용 가능한 컴포넌트를 사용할 때 텍스트 영역의 값을 변경하려면 어떻게 해야 합니까?

재사용 가능한 컴포넌트를 사용할 때 텍스트 영역의 값을 변경하려면 어떻게 해야 합니까?

다른 컴포넌트 텍스트영역에 텍스트를 입력하기 위한 요건을 충족하면 특정 컴포넌트의 텍스트영역 내에서 텍스트를 변경해야 합니다.나는 그 문제를 보여주기 위해 간단한 예를 만들려고 노력했다.주요 문제는 올바른 컴포넌트를 대상으로 하고 동적으로 표시되는 텍스트를 편집하는 것입니다.

상위 컴포넌트

<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.
    }
}

내가 맞췄다면 첫 번째 컴포넌트의 값이 특정 기준에 일치하면 두 번째 컴포넌트의 값을 변경하려고 하는 것입니다.이 경우 여기서 찾을 수 있는 동작하는 바이올린을 만들었습니다.첫 번째 재사용 가능한 텍스트 영역에 Foo를 입력하면 두 번째 텍스트 영역에 바가 표시됩니다.

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/

언급URL : https://stackoverflow.com/questions/45601927/how-do-i-change-the-value-of-a-textarea-when-using-a-reuseable-component