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

「爱情、让人受尽委屈。」 2022-09-06 00:14 152阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70][]

父组件代码

<template>
      <div class="wrapper">
        <div class="content-app">
            
            <tab v-model="listType"></tab>
            
    
        </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与子组件通信的数据。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70]: /images/20220829/beadff1bbc3040f48d46c93d1e5771e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 1]: /images/20220829/dd5b0b42c323469496f1bfc65dade7e7.png