Vue.js 기본문법

Components 등록

<template>
  <AppHeader></AppHeader>
		//3. AppHeader 컴포넌트 HTML 입력.
</template>

<script>
import AppHeader from "./components/AppHeader.vue"
//1. AppHeader 컴포넌트 불러오기.

export default {
  name: 'App',
  components: {
    AppHeader : AppHeader,
		//2. AppHeader 컴포넌트로 등록.
  },
  data(){
    return{
      str : "hi",
    }
  },
  methods: {
    renewStr: function(){
      this.str = "bye"
    }
  }
}
</script>

---

Props

: 루트 컴포넌트 에서 하위 컴포넌트로 데이터 보낼때

app.vue

<template>
  <div>
  </div>
  <AppHeader :str ="str" v-on:renew="renewStr"></AppHeader>
		//2. v-bind:"작명**(관리 편의성을 위해 데이터랑 같이)"="str(보낼 데이터)"
		// v-bind:str="str" => :str="str"
</template>

<script>
import AppHeader from "./components/AppHeader.vue"

export default {
  name: 'App',
  components: {
    AppHeader : AppHeader,
  },
  data(){
    return{
      str : "hi",
	//1. app.vue에서 데이터 정의(중요한 정보는 전부 루트 컴포넌트에 저장해 준다.)
    }
  },
  methods: {
    renewStr: function(){
      this.str = "bye"
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

하위 컴포넌트(ex: AppHeader.vue)

<template>
 <div>
      <h1>{{str}}</h1>
				**//4. 데이터 사용**
      <button @click="sendEvent"> send</button>
 </div>
</template>

<script>
export default {
    name: "AppHeader",
    props : {
        str : String,
			**//3. 받아올 데이터 명 : 데이터의 유형 (String, Number, Boolean)**
    },
    methods: {
        sendEvent: function(){
            this.$emit('renew')
        }
    }
}
</script>

<style>

</style>