javascript - 在vue组件中使用纯js变量

Question

我将 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>

请帮忙。

Answer 1

模板中的变量可见性:

<template>
  <span>{{ variableVisibleInTemplate }}</span>
</template>

<script>
export default {
  data() {
    return {
      variableVisibleInTemplate: variableVisibleInScript
    };
  }
};
</script>

示例 1:

您只返回一个变量

src/assets/bra.js

var name = "John";

module.exports = name;

src/App.vue

<template>
  <span>{{ name }}</span>
</template>

<script>
import name from "./assets/bra.js";
// or:
// const name = require("./assets/bra.js");

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

示例 2

您返回许多变量

src/assets/bra.js

var name = "John";

module.exports = {
  name: name
};

src/App.vue

<template>
  <span>{{ name }}</span>
</template>

<script>
import { name } from "./assets/bra.js";
// or:
// const { name } = require("./assets/bra.js");

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

另请阅读:Understanding module.exports and exports in Node.js