VueJs 데이터전달 방법

자식컴포넌트에서 부모컴포넌트로 데이터 전달

자식컴포넌트

this.$emit('child', data1, data2, ...)

부모컴포넌트

<childComponent @child = "childFunction"/>
<script>
  methods : {
    childFunction(data1, data2, ...) {
    }
  }
</script>

부모컴포넌트에서 자식컴포넌트로 데이터 전달

부모컴포넌트

<childComponent :name="nameObj"/>

자식컴포넌트

<script>
props : {
 name : {},
}
</script>

같은 레벨의 컴포넌트끼리 데이터 전달

main.ts

<script>
export const eventBus = new Vue({
  methods: {
    changeContent(data:string) {
      this.$emit('changeData', data);
    },
  },
});
</script>

보내는 컴포넌트

<script>
import { eventBus } from '@/main';

  methods: {
    modify(data:string):void {
      eventBus.changeData(data);
    },
  },
</script>

받는 컴포넌트

<script>
import { eventBus } from '@/main';

created() {
  eventBus.$on('changeData', (data) => {
    console.log(data);
  });
},
</script>

main.ts에 eventBus 추가시 ESLint import/prefer-default-export 오류 발생할때 1번이나 2번으로 해결

1. eslintrc.json에 추가

"rules": {
     "import/prefer-default-export": "off",
}

2. 자동생성된 Vue를 default로 지정

<script>
// 변경 전
new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount('#app');

// 변경 후 
export default new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount('#app');
</script>