vue 모듈간 데이터 전송

15297 단어 vuevue

파일들

  1. index.html
  2. main.js
  3. App.vue
  4. Btn.vue
  5. Hello.vue
  • 추가로 webpack.config.js에서
    alias : {
      '~' : path.resolve(__dirname , 'src')
    }

~를 지정해주었다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

main.js

import {createApp} from 'vue'
import App from '~/App'
//전역등록
import Btn from '~/component/Btn'

const app = createApp(App)
app.component('Btn',Btn)
app.mount('#app')

전역으로 Btn이 App컴포넌트를 통해 만들어진 application에 등록된 상태이다.

App.vue

<template>
  <button @click="reverseMsg">
    click!
  </button>
  <Hello
    :message="msg"
    :name="name"
  />
</template>

<script>
  import Hello from '~/component/Hello.vue'
   export default{
      components : {
        Hello
      },
     data(){
        return {
          msg : 'Hello Vue!',
          name : '123'
        }
     },
     methods : {
        reverseMsg(){
          this.msg = this.msg.split('').reverse().join('')
        }
     }
   }
</script>

msg의 Hello Vue!와 name의 123을 Hello태그와 함께 처리

Btn.vue

<template>
  <button @click="log">
    Click me!
  </button>
</template>

<script>
    export default {
      methods:{
        log(){
          console.log('Click')
        }
      }
    }
</script>

Hello.vue

<template>
  <h1 @click="update">
    {{ newMessage }}
  </h1>
  <h2>{{ name }}</h2>
</template>

<style scoped lang="scss">
    $color : orange;
    h1{
        color:$color;
    }
</style>

<script>
    export default{
      props : {
        message : String,
        name : [String, Number]
      },
      data(){
        return {
          newMessage : this.message
        }
      },
      methods:{
        update(){
          this.newMessage ='Good'
        }
      }
    }
</script>

<Hello :message="msg" :name="name"/>의 message와 name을 props로 받아 처리해서 해당 태그들에 적용시킨다.

08_13 학습 노트
DynamoDB/Aurora: 드문드문 색인 및 부분 색인

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage