import Child from './Child.vue'需要引入什么
时间: 2024-05-18 12:11:56 浏览: 19
在使用 import Child from './Child.vue' 语句前,需要确保以下两个条件满足:
1. 项目中要安装 Vue.js,可以通过 npm install vue 命令安装,也可以在 HTML 中引入 Vue.js 的 CDN。
2. 在项目中需要有一个名为 Child.vue 的 Vue 单文件组件,即在项目中存在一个名为 Child.vue 的文件,并且该文件中定义了一个 Vue 组件。
相关问题
<template> <div>我是爷爷组件我有{{ money }}元钱</div> <hr /> <Child></Child> </template> <script> import { ref, provide } from 'vue' import Child from './Child.vue' export default { name: 'App', components: { Child }, setup() { // 直接把数据传递出去给孙子传 const moneySendGrandson = function(value) { console.log('孙子传值给我', value) } provide('moneySendGrandson', moneySendGrandson) const money = ref(2000) return { moneySendGrandson, money } } } </script> 改成<script setup lang="ts">写法
可以这样改写:
<template>
<div>我是爷爷组件我有{{ money }}元钱</div>
<hr />
<Child></Child>
</template>
<script setup lang="ts">
import { ref, provide } from 'vue'
import Child from './Child.vue'
const moneySendGrandson = function(value: number) {
console.log('孙子传值给我', value)
}
const money = ref(2000)
provide('moneySendGrandson', moneySendGrandson)
export { money }
</script>
<template> <view class="container"> <swiper class="swiper-con both" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"> <swiper-item v-for="item in swi" :key="item"> <image class="swiper-imag" :src="item"></image> </swiper-item> </swiper> <tui-tab :tabs="tabs" scroll @change="change" isSticky="true"></tui-tab> </view> </template> <script setup> import { reactive, ref } from 'vue' const tabs = reactive([ '推荐', '食品', '水果蔬菜', '新款男装', '内衣', '女装', '百货', '医药', '手机', '鞋包' ]) const tabBars = reactive([ { name: '凉拌洋葱' }, { name: '南瓜粥' }, { name: '酸辣土豆丝' }, { name: '西红柿炒鸡蛋' }, { name: '酸菜鱼' }, { name: '糖醋排骨' }, { name: '糖醋鱼' }, { name: '鱼香肉丝' }, ]) const change = (index)=>{ index = index } const swi = reactive([ '../../static/images/banner/1.jpg', '../../static/images/banner/2.jpg', '../../static/images/banner/3.jpg', '../../static/images/banner/4.jpg', '../../static/images/banner/5.jpg', ]) </script> <style lang="scss"> .container { ::v-deep .swiper-con { height: 300rpx; .uni-swiper-wrapper { border-radius: 16rpx; } .swiper-i { border-radius: 16rpx; } .swiper-imag { height: 100%; width: 100%; } } } </style>根据tui-tab标签选项卡绑定他对应的内容并且能滑动跟随
您可以将每个标签对应的内容放在一个数组中,然后使用v-for指令循环渲染出来,并将tab的index绑定到swiper的current属性上,实现切换标签时,滑动跟随的效果。具体代码如下:
<template>
<view class="container">
<swiper class="swiper-con both" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500" :current="currentIndex">
<swiper-item v-for="(item, index) in swi" :key="index">
<image class="swiper-imag" :src="item"></image>
</swiper-item>
</swiper>
<tui-tab :tabs="tabs" scroll @change="change" isSticky="true"></tui-tab>
<view class="tab-content">
<view class="tab-item" v-for="(item, index) in tabBars" :key="index" :class="{'active': currentIndex === index}">
<text>{{item.name}}</text>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
const tabs = reactive([
'推荐',
'食品',
'水果蔬菜',
'新款男装',
'内衣',
'女装',
'百货',
'医药',
'手机',
'鞋包'
])
const tabBars = reactive([
{ name: '凉拌洋葱' },
{ name: '南瓜粥' },
{ name: '酸辣土豆丝' },
{ name: '西红柿炒鸡蛋' },
{ name: '酸菜鱼' },
{ name: '糖醋排骨' },
{ name: '糖醋鱼' },
{ name: '鱼香肉丝' },
])
const change = (index) => {
currentIndex = index
}
const swi = reactive([
'../../static/images/banner/1.jpg',
'../../static/images/banner/2.jpg',
'../../static/images/banner/3.jpg',
'../../static/images/banner/4.jpg',
'../../static/images/banner/5.jpg',
])
const currentIndex = ref(0)
</script>
<style lang="scss">
.container {
::v-deep .swiper-con {
height: 300rpx;
.uni-swiper-wrapper {
border-radius: 16rpx;
}
.swiper-i {
border-radius: 16rpx;
}
.swiper-imag {
height: 100%;
width: 100%;
}
}
.tab-content {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
.tab-item {
width: 25%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
border-top: 2rpx solid #f5f5f5;
border-left: 2rpx solid #f5f5f5;
&:last-child {
border-right: 2rpx solid #f5f5f5;
}
&:nth-child(4n+1) {
border-left: none;
}
&:nth-last-child(-n+4) {
border-bottom: 2rpx solid #f5f5f5;
}
&.active {
background-color: #f5f5f5;
}
}
}
}
</style>
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)