关于前端:复用组件data相互影响

问题形容：

在一个子组件中用button管制div的显示暗藏（v-if实现），在两个div中都应用了同一个自定义组件，然而这两个组件的data相互影响。

• select_show的初始值为false，能够看到这里切换游戏属性到渠道属性，属性select_show同步变动。

<!--子组件-->
<div v-if="cur_attr === '游戏属性'">
     <span class="c-fix-title wt">以后正在筛选：游戏属性</span>
     <Divider />
     <aSelect
          attr_name="玩过的游戏"
          btn_name="游戏组"
          :attrList="cityData"
          :stype="2"
      ></aSelect>
</div>
<div v-if="cur_attr === '渠道属性'">
     <span class="c-fix-title wt">以后正在筛选：渠道属性</span>
     <Divider />
     <aSelect
          attr_name="渠道"
          btn_name="channel"
          :attrList="cityData1"
     ></aSelect>
     <aSelect
          attr_name="渠道1"
          btn_name="channel1"
          :attrList="cityData"
          :stype="2"
     ></aSelect>
</div>

<!--自定义组件-->
<Button type="primary" ghost @click="select_handle">{{ btn_name }}</Button>
<div class="select-div" v-if="select_show">
    <span>{{ select_show }}</span>
    <selecter
        v-model="mult_group"
        :data="selectList"
        search
        :title="['一级', '二级']"
        @on-select="selectAll"
        @on-delete="delTag"
        @on-clear="clearTag"
    />
</div>
data () {
    return {
      checked: true,
      select_show: false,
    }
},
methods: {
    select_handle () {
        this.select_show = !this.select_show
    },
}

问题剖析：

测试发现在同一个div里复用两个自定义组件data就不会相互影响，思考到首次渲染的时候有两个雷同组件就会为他们的data别离调配一份内存，然而另一个div的v-if为true的时候和上一个div的data指向了同一份内存，不同变量指向了雷同的地址，也有可能与keep-alive无关。

• 这里能够看到在同一个div外面就不会相互影响，因为在渲染的时候为两个子组件的data别离调配了内存。

问题解决：

• 比拟粗犷的形式就是另外复制一份代码，从新写一个组件，然而这种形式就会造成代码冗余。
• 也能够思考通过prop又父组件传参给子组件，这样就不会因为data专用而相互影响了，然而如果参数很多代码也会看起来很芜杂。
• 比拟优雅地形式是应用v-show，因为v-show是会在一开始渲染的时候就渲染DOM，只有有DOM，就会为这几个雷同的子组件的data调配不同的内存，也就不会相互影响了，然而毛病是会耗费更多的内存，然而这里的话影响不是很大。