vue 实现子向父传值

Posted 2021-10-22 a-pupil

父组件

<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>