Javascript 在vue组件中使用纯js变量

我正在将laravel与vue一起使用。在assets文件夹中，我用变量创建了bra.js文件

var name="John"

然后在main.js中我添加了bra.js

require('./bra');

我想在component.vue中使用var name，如下所示，但我不能

 <template>
 <div>
 <p> {{ name }}</p>
 </div>
 </template>

请提供帮助。

模板中的可变可见性： {{variableVisibleInTemplate} 导出默认值{ 资料{ 返回{ variableVisibleInTemplate:variableVisibleInScript }; } }; 例1： 您只返回一个变量

src/assets/bra.js

var name=John； module.exports=名称； src/App.vue

{{name}} 从./assets/bra.js导入名称； //或： //const name=require./assets/bra.js； 导出默认值{ 资料{ 返回{ 姓名：姓名 }; } }; 例2 返回许多变量

src/assets/bra.js

var name=John； module.exports={ 姓名：姓名 }; src/App.vue

{{name}} 从./assets/bra.js导入{name}； //或： //const{name}=require./assets/bra.js； 导出默认值{ 资料{ 返回{ 姓名：姓名 }; } }; 另请阅读：

只需使用/指令即可

src/assets/bra.js

src/component.vue

---

您可以尝试使用全局变量window.name=John，类似于此，并在vue componentrequire中使用相同的变量。作为一个常见模块，您必须导出一个变量，然后导入const bra=require。“/bra”

export const name = "John";

<script>
import { name } from "@/assets/bra";

export default {
  ...
  data() {
    return {
      name: name
    }
  }
  ...
};
</script>