如何在vue-cli中调用纯HTML方法 纯HTML转Vue.js问题咨询

方案一：改造为Vue单文件组件（最优方案） #

该方案兼容Vue原生组件通信规则，无需额外兼容逻辑，适配性最好。

• 第一步：在vue-cli项目src/components目录下新建CustomButton.vue，替换原有独立HTML文件，代码如下：

<template>
  <button @click="childclick">自定义按钮</button>
</template>
<script>
export default {
  name: 'CustomButton',
  data() {
    return {
      vueMessage: 'testing vue message',
    }
  },
  methods: {
    childclick() {
      this.$emit('childclick', 'success!')
    }
  }
}
</script>

• 第二步：修正product.vue代码，正确引入注册组件：

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

<script>
// 引入自定义组件
import CustomButton from './components/CustomButton.vue'
export default {
  // 注意此处为components（复数），原代码拼写错误
  components: { CustomButton },
  methods: {
    childclick(value) {
      console.log(value)
    }
  }
}
</script>

方案二：保留原生HTML文件，通过iframe嵌入通信 #

如果必须保留独立的custombutton.html文件，可通过iframe加载+跨上下文消息通信实现。

• 第一步：将custombutton.html放入vue-cli项目的public目录下，修正HTML代码错误并增加消息发送逻辑：

<html>
<body>
  <!-- 原代码缺失el对应的#app挂载节点，补充 -->
  <div id="app">
    <button @click="childclick">自定义按钮</button>
  </div>
  <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() {
        // 通过postMessage向父页面传递事件
        window.parent.postMessage({
          event: 'childclick',
          data: 'success!'
        }, '*')
      }
    },
  });
  </script>
</body>
</html>

• 第二步：修改product.vue代码，加载iframe并监听消息事件：

<template>
  <iframe 
    ref="customBtnIframe" 
    src="/custombutton.html" 
    frameborder="0"
    style="width: 100px;height: 40px;"
  ></iframe>
</template>

<script>
export default {
  mounted() {
    // 监听iframe传递的消息
    window.addEventListener('message', this.handleIframeMessage)
  },
  beforeDestroy() {
    // 组件销毁前移除监听，避免内存泄漏
    window.removeEventListener('message', this.handleIframeMessage)
  },
  methods: {
    handleIframeMessage(e) {
      // 判断消息来源和事件类型，避免异常消息干扰
      if (e.data?.event === 'childclick') {
        this.childclick(e.data.data)
      }
    },
    childclick(value) {
      console.log(value)
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者anson