将 vuejs 与现有的 html 一起使用

Posted 2023-02-23

【中文标题】将 vuejs 与现有的 html 一起使用

【英文标题】：Using vuejs with existing html

【发布时间】：2019-03-21 13:56:05

【问题描述】：

我有一个元素列表，呈现在服务器端。

每个项目都有一个改变其状态的按钮。

<div class="list">

  <div class="list-item" data-is-published="1" data-item-id="11">
    <div class="item-link">Item 1</div>
    <form method="post" class="list-item-form">
      <div class="vue-mount">
        <input type="submit" name="changeStatus" class="button-unpublish" value="Unpublish">
        <!-- some hidden fields -->
      </div>
    </form>
  </div>

  <div class="list-item" data-is-published="1" data-item-id="12">
    <div class="item-link">Item 2</div>
    <form method="post" class="list-item-form">
      <div class="vue-mount">
        <input type="submit" name="changeStatus" class="button-unpublish" value="Unpublish">
        <!-- some hidden fields -->
      </div>
    </form>
  </div>

</div>

我正在使用以下代码将每个项目替换为vue组件

var ms = document.querySelectorAll('.vue-mount')
for (var i = 0; i < ms.length; i++) 
  new Vue(
    render: h => h(SubscriptionButton)
  ).$mount(ms[i])

在组件上我得到data-is-published 和data-item-id 的值并将它们设置在组件上

<template>
  <input
  type="submit"
  @click.prevent="changeStatus()"
  :value="isPublished === 1 ? 'Unpublish' : 'Publish'">
</template>

<script>
export default 
....
  created: function () 
    const el = this.$root.$el.parentNode.parentNode
    const status = el.dataset.isPublished
    this.isPublished = parseInt(status)
    this.itemID = el.dataset.itemID
  

我这样做是为了确保即使禁用 javascript 也能正常工作，但 this.$root.$el.parentNode.parentNode 部分感觉不对。

我的做法好吗？有没有更好的方法来达到同样的效果？

---

编辑

我可以将数据属性放在 vue 将要挂载到的元素上，并使用 this.$root.$el.dataset 访问它们。

我不确定this.$root.$el 的使用是否符合最佳实践。

【参考方案1】：

你可以使用Element.closest（如果需要 IE 支持，可以使用 polyfill）

const el = this.$root.$el.closest("*[data-is-published]");

这避免了必须知道 DOM 的层次结构深度。

MDN的信息

编辑添加：

使用this.$root.$el 的适当性取决于您计划如何构建代码。如果您要查找的元素保证是 Vue 应用程序的父元素，那么从 $root 开始搜索就可以了。但是，如果这让您感到困扰，那么从 this.$el 开始搜索会起作用。

您的方法中不太常规的部分是它有效地为每个.vue-mount 创建了一个单独的 Vue 应用程序

【讨论】：

这是我不确定的 this.$root.$el 部分。像这样使用this.$root.$el 是一种好习惯吗？

更新了答案，但访问this.$root.$el并没有什么特别的问题