使用 vanilla js append，vue.js 失去引用答案

【问题标题】：Using vanilla js append, vue.js loses refrence使用 vanilla js append，vue.js 失去引用
【发布时间】：2021-10-03 22:13:48
【问题描述】：

我将简化示例。基本上我在一个页面上有多个小部件，我认为最好不要将所有小部件复制到 v-dialog 中，而是使用参考并将它们添加到对话框中并在需要时返回到网格中。问题是当我将我的 html 附加到对话框中并尝试运行 this.$refs vue 丢失了无限加载组件的跟踪... this.$refs 不包含 ref="infinitiveLoading"。如果 some1 可以解释并可能推荐更好的做法.. thx

<div>
  <div id="item_containerTest" ref="item_containerTest">
    <span>Hello world</span>
    <infinite-loading
          ref="infinitiveLoading"
          v-show="items.length !== 0 || this.loading"
          @infinite="infiniteHandler"
        >
          <div slot="no-more"></div>
    </infinite-loading>
  </div>
  <v-dialog v-model="scheduleDialog" id="dialog" ref="dialog"> </v-dialog>
</div>

//忽略 itemID 和 columnID，我需要它们，以便在对话框关闭后将项目附加回网格

openFullScreenDialog(itemId, columnId, title){
  itemContainer = document.getElementById(`item_container${title}`);
  dialog = document.getElementById("dialog");
  dialog.append(itemContainer);
}

【问题讨论】：

在使用像 Vue.js 或 React.js 这样的框架时直接操作 DOM 总是自找麻烦。框架不知道这些操作，因此不会按预期运行。

标签： javascript html vue.js nuxt.js vuetify.js

【解决方案1】：

正如 Lucero 在 cmets 中所说，您不应该使用经典的 javascript API 来操作 DOM。破坏了 Vuejs 的影子 DOM（即内存中当前 DOM 状态的运行时副本），因此破坏了它的反应性和组件引用。

如果您有一个内容必须根据道具包装在不同的容器中，例如，您可以为此使用插槽 :)

<template>
  <div>
    <div v-if="dialog">
      <slot>
    </div>
    <v-dialog v-else v-model="openDialog">
      <slot>
    </v-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

export default Vue.extends({
  name: 'GridOrDialog',
  props: {
    dialog: { type: Boolean, default: false }
  },
  data() {
    return {
      openDialog: true,
    }
  }
})
</script>

这样，你只需要声明一次内容，如果你将 prop dialog 设置为 true，它就会出现在 v-dialog 上。

<GridOrDialog dialog="isDialogMode">
  <span>Hello world</span>
  <infinite-loading
     ref="infinitiveLoading"
     v-show="items.length !== 0 || this.loading"
     @infinite="infiniteHandler"
  >
    <div slot="no-more"></div>
  </infinite-loading>
</GridOrDialog>

【讨论】：