Vue 代码分析：el-collapse 组件 v-model 绑定和事件监听问题

<template>
  <article class='collapse-filter-box'>
    <div class='left'>
      <slot name='leftTop'></slot>
      <el-collapse accordion v-model='isShow'>
        <el-collapse-item name='1'>
          <slot name='leftBottom'></slot>
        </el-collapse-item>
      </el-collapse>
      <!-- <article class='container' :class='{ "show": isShow }'>
        <slot name='leftBottom'></slot>
      </article> -->
    </div>
    <div
      class='right'
      :style='{
        width: clientWidth < 1444 ? '135px' : '205px',
      }'
    >
      <slot name='right'></slot>
      <div class='btn-wrapper' v-if='$slots.leftBottom'>
        <span @click='switchView' class='inner-btn'>
          <span class='btn-text'>
            {{ isShow ? '收起' : '展开' }}
          </span>
          <i
            type='primary'
            :class='{ hide: !isShow }'
            class='el-icon-d-arrow-right'
          ></i>
        </span>
      </div>
    </div>
  </article>
</template>
<script>
export default {
  data () {
    return {
      isShow: '1', // 修改初始值为字符串类型
      clientWidth: document.documentElement.clientWidth
    }
  },
  mounted () {
    window.addEventListener('resize', () => {
      this.clientWidth = document.documentElement.clientWidth
      // console.log(this.clientWidth);
    })
  },
  beforeDestroy () { // 添加 beforeDestroy 钩子
    window.removeEventListener('resize', () => {
      this.clientWidth = document.documentElement.clientWidth
      // console.log(this.clientWidth);
    })
  },
  methods: {
    switchView () {
      this.isShow = this.isShow ? '' : '1'
    }
  }
}
</script>