问题形容：

在一个子组件中用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调配不同的内存，也就不会相互影响了，然而毛病是会耗费更多的内存，然而这里的话影响不是很大。