단순 코드 기록/Vue

Vue_Emit

일일일코_장민기 2024. 3. 11. 10:41
728x90
App

 

 

<template>
  <div>
    <enter mesg="enter"/>
    <List mesg="List"/>
  </div>
</template>

<script>
import enter from './components/enter.vue'
import List from './components/List.vue'

export default {
    components:{
      enter,
      List
    }
}
</script>

<style>

</style>

 

input
<template>
  <div>
    <h1>{{ mesg }}</h1>
    <input type="text" v-model="data" @keyup.enter="naming">
  </div>
</template>

<script>
import eventBus from './EventBus.vue';
export default {
  props:{
        mesg:String
  },
  data:function(){
    return {
      data:""
    }
  },
  methods:{
    naming:function(){
      eventBus.$emit("name", this.data);
      this.data="";
    },
  },

}


</script>

<style>

</style>
list
<template>
    <div>
      <h1>{{ mesg }}</h1>
      <ul>
        <li v-for="(name, idx) in nameList" :key="idx">
          {{ name }}<button @click="deleteBtn(idx)">삭제</button>
        </li>
      </ul>
      {{ nameList }}
    </div>
  </template>
 
  <script>
import eventBus from './EventBus.vue';  
  export default {
      props:{
          mesg:String
      },
      created:function(){
        eventBus.$on("name", this.recevie);
      },
      data:function(){
        return {
            nameList:[]
        }
      },
      methods:{
        recevie(v1){
            this.nameList.push(v1);
        },
        deleteBtn:function(n){
            console.log(n);
            this.nameList.splice(n, 1);          
        }
      }

  }
  </script>
 
  <style>
 
  </style>