vue 實現子向父傳值

父組件

<template>
  <div id="app">
    <child @onChange='onChildValue'></child>
    <div v-if='index == 0'>這是index為零的值</div>
    <div v-else-if='index == 1'>這是index為壹的值</div>
    <div v-else='index == 2'>這是index為貳的值</div>
  </div>
</template>

<script>
// 引入子組件
import child from './components/child.vue'
export default {
    //放入到組件鈎子函數中
  components:{child},
  data(){
    return{
      index:0
    }
  },
  methods:{
    // val 從子組件中獲取到的值
    onChildValue(val){
      this.index = val
      console.log(val)
    }
  }
}
</script>

<style scoped> 

</style>

子組件

<template>
    <div class="child">
        //根據條件判斷 顯示切換之后的樣式
        <button v-for="(item,index) in list" :key="item.index" :class="[index == num ? 'add' : '']" @click="addStyle(index)">
            {{ item }}
        </button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            list:['推薦','必備','爆款'],
            num:0
        }
    },
    methods:{
        addStyle(index){
            // 進行子向父傳值
            this.num = index
            //使用$emit想父組件進行傳值
            this.$emit("onChange",this.num)
        }
    }
}
</script>

<style scoped>
    button{
        margin-left:30px;
    }
    .add{
        color:red;
        font-size:26px;
    }
</style>