在vue组件中使用纯js变量

Question

我将laravel与vue一起使用。在资产文件夹中，我创建了带有变量的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

Answer 2

只需使用import / export指令。

src / assets / bra.js

export const name = "John";

src / component.vue

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

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