乐趣区

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

jiezi

问题形容 ：

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