Question

寻求最佳做法或建议如何做得更好：

我正在XHR请求获取菜单项的那个组件中有1个全局可重用组件<MainMenu>。

因此，如果我将<MainMenu>放在页眉和页脚中，XHR将被发送2次。

我还可以使用道具来获取主要父组件中的菜单项，并将菜单项传递给<MainMenu>，例如：

<MainMenu :items="items">

打赌，这意味着我不能快速在其他项目中重复使用它，我将需要传递道具。

另一种方式是使用状态，即与道具基本相同。

对于这种用例，什么是最佳选择？

Answer 1

如果您不想实例化一个新组件，但是在许多地方都拥有主菜单，则可以使用ref="menu"，这将允许您访问它的innerHTML或outerHTML。我创建了一个示例here，您可以参考。

<div id="app">
  <main-menu ref="menu" />
  <div v-html="menuHTML"></div>
</div>

refs不是被动的，因此，如果您使用v-html="$refs.menu.$el.outerHTML"则不会起作用，因为创建组件时refs仍未定义。为了正确显示它，您必须创建一个保留主菜单HTML的属性并将其设置在mounted钩子中：

data() {
  return {
    menuHTML: ''
  }
},
mounted() {
  this.menuHTML = this.$refs.menu.$el.outerHTML;
}

这使您可以多次显示菜单，而无需创建新组件，但仍不能改变其无反应性的事实。

在示例中，菜单元素保留在items数组中。如果要更改items数组中的对象，这些更改将反映在主要组件中，但是其克隆将保持不变。在示例中，两秒钟后，我向项目添加了“红色”类。

要使其生效以使更改反映在克隆的元素中，您需要添加一个观察者，以观察items数组中的更改并在发现任何更改时更新menuHTML：

mounted() {
  this.menuHTML = this.$refs.menu.$el.outerHTML;
  this.$watch(
    () => {
        return this.$refs.menu.items
    },
    (val) => {
      this.menuHTML = this.$refs.menu.$el.outerHTML;
    }, {
    deep: true
    }
  )
}

您还可以使用以下方法监视任何数据属性中的更改：

this.$refs.menu._data

使用此方法，您无需将props传递到主菜单组件，也无需对其进行任何更改，但是此解决方案仍然需要在其父组件中实现一些其他逻辑。

VueJS XHR内部可重用组件

1 个答案: