vue2的mixins写法
这是一个混入js
demoMixins.js
export default {
data() {
return {
dataList: {
initData: {
price: 122,
title: '当当图书系统',
type: '考研辅导',
url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgx.wadongxi.net%2Fitem%2Fi1%2FTB10n5oKFXXXXbXXXXXXXXXXXXX_%21%210-item_pic.jpg_400x400Q90.jpg&refer=http%3A%2F%2Fimgx.wadongxi.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636647015&t=1d73de8682aa7f14e87c377139b560b1',
},
dataArr: [],
},
};
},
//处理列表数据
mounted() {
for (let i = 0; i < 50; i++) {
this.dataList.dataArr.push(this.dataList.initData);
}
},
};
demo.vue组件需要demoMixins.js的方法,处理如下
<template>
<div
v-for="(item, index) in dataList.dataArr"
:key="index"
style="display: flex; width: 500px"
>
<img :src="item.url" alt="" style="width: 200px; height: 200px" />
<div style="width: 250px">
<p>图书标题:{
{ item.title }}</p>
<p>图书类型:{
{ item.type }}</p>
<p>图书价格:{
{ item.price }}</p>
</div>
</div>
</template>
<script>
import demoMixins from "./../hooks/demoMixins.js";
export default {
name: "demoMixins",
mixins: [demoMixins],
};
vue3的hooks混入写法
demoHooks.js
import { reactive } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
export default function() {
//处理列表数据
let data = reactive({
initData: {
price: 122,
title: '当当图书系统',
type: '考研辅导',
url:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgx.wadongxi.net%2Fitem%2Fi1%2FTB10n5oKFXXXXbXXXXXXXXXXXXX_%21%210-item_pic.jpg_400x400Q90.jpg&refer=http%3A%2F%2Fimgx.wadongxi.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636647015&t=1d73de8682aa7f14e87c377139b560b1',
},
dataArr: [],
});
onMounted(() => {
for (let i = 0; i < 50; i++) {
data.dataArr.push(data.initData);
}
});
return data;
}
demoH.vue
<template>
<div
v-for="(item, index) in dataList.dataArr"
:key="index"
style="display: flex; width: 500px"
>
<img :src="item.url" alt="" style="width: 200px; height: 200px" />
<div style="width: 250px">
<p>图书标题:{
{ item.title }}</p>
<p>图书类型:{
{ item.type }}</p>
<p>图书价格:{
{ item.price }}</p>
</div>
</div>
</template>
<script>
<script>
import demoHooks from "demoHooks.js";
export default {
name: "demoHooksfrom ",
setup() {
const dataList = demoHooks();
return { dataList };
},
};
</script>
</script>