testCom1.vue
<template>
<view><slot name="test"></slot></view>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
<style></style>
testCom.vue
<template>
<view>
<slot name="test1"></slot>
<testCom1>
<template #test>
<slot name="test2"></slot>
</template>
</testCom1>
</view>
</template>
<script>
import testCom1 from '@/components/custom/testCom1';
export default {
components: { testCom1 },
data() {
return {
title: 'image'
};
}
};
</script>
<style></style>
test.vue
<template>
<view class="page">
<view>页面image组件</view>
<view class="image-list"><image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="scaleToFill" :src="src"></image></view>
<test-com>
<!-- <template v-slot:test1>
<view>自定义组件一层嵌套image组件</view>
<view class="image-list"><image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="scaleToFill" :src="src"></image></view>
</template> -->
<template v-slot:test2>
<view>自定义组件两层嵌套image组件</view>
<view class="image-list"><image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="scaleToFill" :src="src"></image></view>
</template>
</test-com>
</view>
</template>
<script>
import testCom from '@/components/custom/testCom';
export default {
components: { testCom },
data() {
return {
image:
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589803672629&di=1d365548a9124df499347debe6201e17&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201305%2F12%2F20130512095153_WSu5Q.jpeg'
};
},
computed: {
src() {
const ths = this;
return `${ths.image}`;
}
},
onLoad() {
const ths = this;
setTimeout(() => {
ths.image =
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589803718737&di=a5dcf1315a8d9add484ed33ba4479f4a&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F98f3d522c930d58fdc58bdabe74bdb823454da84.jpg';
}, 1000 * 3);
},
methods: {}
};
</script>
<style></style>
0 个回复