VUE: component와 parent간 data 이동

- vue의 component와 parent는 prop으로 data 전달한다.

 

문제 발생

vue에서는  component에서 prop값을 직접 변경하지 못하게 하여 parent의 값을 바꾸지 못하게 설계되어있다.

 

해결방안

이를 해결하기 위한 방안 중 합리적인 것은 다음과 같다.

 

1. vuex 사용

2. sync/ $emit 사용

3. $emit을 이용한 customized event 사용

 

 

사용해본 결과 이 중에서 가장 추천되는 것은 vuex이나, 직관적인 것은 sync와 $emit 사용이다. 이는 vue version 2.3 부터 사용이 가능하다.

 

1. parent

<div id="app">
	<user-agent-selection
	:user-agent.sync="userAgent"></user-agent-selection>
</div>

import UserAgentSelection from 'selection.js';
var vm = new Vue({
  el: "#app",
  components: {
  UserAgentSelection,
  },

  data() {
    return {
    userAgent:null,
    }
  }
 })

2. component( selection.js);

export var UserAgentSelection = {
    props:{

        userAgent:{
            type: String,
            default: null
        }
    },
    data() {
      return {
        innerUserAgent: null
      };
    },

    watch: {
      innerUserAgent(innerUserAgent) {
          this.$emit("update:userAgent", innerUserAgent);
     
      },
    },
    template: `
        <input 
        type="text"
        v-model="innerUserAgent" placeholder="user agent 입력(기본 all)"></input>
    `
  };