如何从 .js 文件中检索变量？

Question

如何从 vue 文件访问 js 文件中定义的变量？ 有没有办法将此变量传递给 vue 文件？ 在下面的代码中，我有一个template.js文件和一个contact.vue文件。 我正在将模板文件中的 mjml 转换为 html，我需要访问从 vue 文件保存到plainHmtl变量的输出。

模板.js

const mjml2html = require('mjml')
const Vue = require('vue')

const app = new Vue({
    data: {
        name: ''
    },
    template: `
<mj-section>
  <mj-column>
    <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello {{ name }}</mj-text>
  </mj-column>
</mj-section>`
})

const renderer = require('vue-server-renderer').createRenderer({
    template: `
<mjml>
  <mj-body>
    <!--vue-ssr-outlet-->
  </mj-body>
</mjml>`
})

renderer.renderToString(app).then(html => {
    const htmlWithoutDataServerRenderedAttribute = html.replace(`data-server-rendered="true"`, '')
    const plainHtml = mjml2html(htmlWithoutDataServerRenderedAttribute)
    console.log(plainHtml.html)
})

联系方式

<template>
   <div class="sign_up" id="signupform">
     <main role="main">
      <div class="SignUp_container">
      <form class="form-signup" @submit.prevent="processForm">
      <input type="text" name="name" placeholder="Enter First Name" required/>
      <input type="text" name="lname" placeholder="Enter Last Name" required/>
      <input type="email" name="mailaddr" placeholder="Your email address" required/>
      <div class="sign_cancel_buttons">
      <router-link to="/">
        <button id="canlbtn" type="cancel" class="clbtn">
          Cancel
        </button>
         </router-link> 
        <button id="signupbtn" type="submit" name="sendmsg-button" class="signbtn">
          Sign Up
        </button>
      </div>
      </form>
      </div>
     </main>
   </div>
</template>
<script>
   export default {
       methods: {
       
       // how do I access plainHtml here?
       
       }
   }
</script>

Answer 1

在 template.js 中，定义一个变量，您将在其中获得转换 html 的最终结果，一旦定义，只需将其添加到文件末尾：

export { varHTML }

现在在contact.vue中你必须导入和使用我们从template.js做的导出，考虑到你必须根据你处理文件的情况修改导入路径：

import { varHTML } from './template.js'
<script>
   export default {
       data() {
         return {
           plainHtml: null
         }
       }
       methods: {
         // how do I access plainHtml here?
       
         // any method that is going to be needed now will have plainHtml available
       },
       created () {
         this.plainHtml = varHTML
       }
   }
 </script>