vue + 纯 html 组件？答案

【问题标题】：vue + pure html component?vue + 纯 html 组件？
【发布时间】：2021-11-02 08:33:36
【问题描述】：

如何实现vue-cli调用纯html方法？

请检查下面的示例文件。因为我有自定义的纯 html 代码，并且在将其转换为 vuejs 时遇到了困难。

product.vue

<template>
    <custombutton @childclick="childclick" />
</template>

<script>
export default {
   component: { custombutton },
   methods: {
    childclick(value) {
         console.log(value)
       }
   }
}
</script>

custombutton.html

<html>
<body>
 <button @click="childclick" />
</body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script>
var App = new Vue({
  el: '#app',
  data() {
    return {
      vueMessage: 'testing vue message',
    }
  },

  methods: {
    childclick() {
       this.$emit('childclick', 'success!')
    }

  },
});
</script>
</html>

【问题讨论】：

标签： html vue.js vue-component

【解决方案1】：

假设您想保留从 .html 文件和 .vue 文件调用 Vue 组件的可能性，我建议您将 Vue 逻辑从 custombutton.html 文件移动到单独的 custombutton.js 文件中，该文件将导出一个表示Vue 组件之前在 HTML 中定义。然后您可以在custombutton.html 和product.vue 中导入custombutton.js。

例子：

custombutton.js:

export default {
  name: 'CustomButton',
  template: '<div>Hello world!</div>'
}

custombutton.html:

<!DOCTYPE html>
<html>
<head>
  <title>App</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import CustomButton from "./custombutton.js"
    new Vue({
      el: '#app',
      components: { CustomButton },
      template: '<CustomButton />'
    });
  </script>
</body>
</html>

product.vue:

<template>
    <CustomButton />
</template>

<script>
import CustomButton from "./custombutton.js"
export default {
   components: { CustomButton }
}
</script>

注意：

要使custombutton.html 工作，目标浏览器应实现ECMAScript modules。
要使product.vue 工作，您应该在您的Vue CLI 配置中设置runtimeCompiler: true。（由于custombutton.js 中的模板被定义为字符串，运行时编译器需要包含在最终包中。）
为custombutton.js 找到合适的位置很重要，这样可以使用custombutton.html 和custombutton.vue 文件中的相对路径轻松导入它。
在custombutton.js 中将模板定义为字符串可能非常不方便，因为您没有标记突出显示，但我没有看到任何解决方法。

【讨论】：

您好，感谢您的回复，但我想将 custombutton.html 作为独立的 HTML 并响应 vue 文件的功能。可能吗？因为我不能在 custombutton.js 中的 template: '
Hello world!
' 中做，所以有很多行代码，并且还包含 javascript 方法。像 vue（作为父级）渲染 iframe（纯 html），以及对父级的 iframe 按钮事件响应
@anson 我发布了另一个答案，应该更好地满足您的要求。

【解决方案2】：

这个解决方案有点麻烦，但允许将带有语法高亮的模板写入<script>元素，这比将模板作为字符串文字写入template属性更方便。

custombutton.js:

export default {
  name: 'CustomButton',
  data: function () {
    return { testVar: 125 }
  }
}

custombutton.component.html: 该模板现在位于#custombutton-template 元素中。应该打印出“Hello world！125”。

<!DOCTYPE html>
<html>
<head>
  <title>App</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <script id="custombutton-template" type="x-template">
    <div>Hello world! {{ testVar }}</div>
  </script>
  <div id="app"></div>
  <script type="module">
    import CustomButton from "./custombutton.js"
    CustomButton.template = "#custombutton-template"
    
    new Vue({
      el: '#app',
      components: { CustomButton },
      template: '<CustomButton />'
    });
  </script>
</body>
</html>

product.vue：感谢 Webpack 配置（见下文），我们能够将 custombutton.component.html 文件的内容作为字符串导入，解析它并获得 #custombutton-template 元素的内部 HTML，这是所需的模板。

<template>
    <CustomButton />
</template>

<script>
import CustomButton from "./custombutton.js"
import CustomButtonComponent from "./custombutton.component.html"

var el = document.createElement("html")
el.innerHTML = CustomButtonComponent
var template = el.querySelector("#custombutton-template").innerHTML
CustomButton.template = template

export default {
   components: { CustomButton }
}
</script>

将custombutton.component.html文件作为字符串导入是由非默认Webpack raw-loader完成的，因此需要调整Webpack配置：

vue.config.js:

module.exports = {
  runtimeCompiler: true,
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.component\.html$/,
          use: ["raw-loader"]
        }
      ]
    }
  }
}

package.json:

{
  "devDependencies": {
    "raw-loader": "^4.0.2"
  }
}

【讨论】：