有时候当一个数组或者对象比较大，且放在了前端，如果将数据放在vue中的data中，就会显得很多。且不方便以后维护，可以当都将这个数据项放在一个js文件中。
这是 js 中的代码，将数据封装在一个函数里面
export function dataInJs() {
var user = [
{
id: 1,
},
{
id: 2,
},
{
id: 3,
},
{
id: 4,
},
{
id: 5,
},
{
id: 6,
},
];
return user;
}
在vue中引入并使用
<script>
import {
dataInJs } from "./data";
export default {
name: "test", //test
mixis: [],
components: {
},
props: {
},
data() {
return {
userList: dataInJs(),
};
},
computed: {
},
watch: {
},
created() {
console.log(this.userList);
},
mounted() {
},
destroyed() {
},
methods: {
},
};
</script>
这是打印结果
注意：
- 引入的方式
import { dataInJs } from "./data";，
import 引入的名字要用花括号括起来，且这个名字要和 js 中函数名一致， - 在data中，将引入过来的数据，传给本地变量，
userList: dataInJs()
变量名后面的数据，实际是js中的函数，所以要加上括号。
除了将数据放在js中，也可以放在一个子组件中，专门用来保存数据。
子组件中的代码
<script>
export default {
name: "data", //data
mixis: [],
components: {
},
props: {
},
data() {
return {
userInfo: [{
id: 1 }, {
id: 2 }, {
id: 3 }, {
id: 4 }],
};
},
computed: {
},
watch: {
},
created() {
this.$emit("userInfoList", this.userInfo);
},
mounted() {
},
destroyed() {
},
methods: {
},
};
</script>
父组件中的代码
<template>
<div class="container">
<Sub @userInfoList="getUserInfo"></Sub>
</div>
</template>
<script>
import Sub from "./data.vue";
export default {
name: "test", //test
mixis: [],
components: {
Sub },
props: {
},
data() {
return {
userList: null,
};
},
computed: {
},
watch: {
},
created() {
console.log("created");
console.log("userList", this.userList);
},
beforeMount() {
console.log("beforeMount");
console.log("userList", this.userList);
},
mounted() {
console.log("mounted");
console.log("userList", this.userList);
},
destroyed() {
},
methods: {
getUserInfo(data) {
console.log(data);
this.userList = data;
},
},
};
</script>
打印的信息
在子组件中引入数据，要在mounted中才可以获取到数据。
如有错误，欢迎指正，谢谢！
以上内容仅供参考，欢迎大家讨论。