v-model自定义实现组件的双向绑定

父组件代码

<template>
  <div class="wrapper">
    <div class="content-app">
        <!-- 组件中用v-model -->
        <tab v-model="listType"></tab>
        <!-- 实验listType与内部子组件接收的值为双向绑定关系 -->
<!--        <div>{{ listType }} - {{2222}}</div>-->
    </div>
  </div>
</template>

<script>
import tab from '@/components/Tab'
export default {
  name: 'index',
  components:{
    tab
  },
  data(){
    return{
      listType: 1,
    }
  },
  mounted() {
  },
  methods:{
  }
}
</script>

<style scoped lang="scss">

</style>

子组件代码

  data() {
    return {

    };
  },
  created(){
  },
  methods: {
    selectTabItem(e) {
       this.$emit("selectTabItem", e);  // $emit的事件名需与model中event相同
    }
  },
};
</script>
<style scoped lang="scss">

.tab-table{
  color: #A4A5A6;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  div{
    cursor: pointer;
    float: left;
    margin-right: 70px;
  }
  .is_select_item{
    color: #172377;
    font-weight: 550;
    &::after{
      content: '.';
      height: 2px;
      width: 100%;
      background-image: linear-gradient(to right, #172377, #A9B7FF);
      border-radius: 16px 16px 42px 42px;
      display: block;
      overflow: hidden;
    }

  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}
</style>

 遇到的问题

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-

原因：在子组件中，你试图修改父组件通过props与子组件通信的数据。