子组件 SwiperBanner
- <!-- -->
- <template>
- <div class="swiper">
- <van-swipe :autoplay="3000"
- indicator-color="white">
- <van-swipe-item v-for="(item,index) in imgList"
- :key="index">
- <img :src="item.img"
- alt="" title="" />
- </van-swipe-item>
- </van-swipe>
- </div>
- </template>
- <script>
- import vue from 'vue';
- import { Swipe, SwipeItem } from 'vant';
- Vue.use(Swipe).use(SwipeItem);
- export default {
- name: 'swiper',
- props: {
- imgList: {
- type: Array,
- required: true
- },
- aaa: '',
- },
- data () {
- return {
- };
- },
- }
- </script>
- <style lang='sCSS'>
- .swiper {
- width: 100%;
- height: 4rem;
- .van-swipe {
- height: 4rem;
- img {
- height: 100%;
- width: 100%;
- }
- }
- }
- </style>
父组件
- <!-- -->
- <template>
- <div class="goodsDetails">
商品详情 {{goodsId}}
- <SwiperBanner :imgList="imgList"
- :aaa="aaa"></SwiperBanner>
- </div>
- </template>
- <script>
- import SwiperBanner from "@/components/SwiperBanner.vue"
- export default {
- components: {
- SwiperBanner,
- },
- data () {
- return {
- goodsId: '',
- imgList: [
- { img: "https://img.yzcdn.cn/vant/apple-1.jpg" },
- { img: "http://file02.16sucai.com/d/file/2014/0704/e53c868ee9e8e7b28c424b56afe2066d.jpg" },
- { img: "https://img.yzcdn.cn/vant/apple-1.jpg" },
- { img: "http://file02.16sucai.com/d/file/2014/0704/e53c868ee9e8e7b28c424b56afe2066d.jpg" },
- ],
- aaa: 'wwwww'
- };
- },
- mounted () {
- var that = this
- that.getGoodsId()
- },
- methods: {
- // 获取参数
- getGoodsId () {
- var that = this
- that.goodsId = this.$route.query.goodsId
- }
- },
- }
- </script>
- <style lang='scss'>
- </style>
来源: http://www.bubuko.com/infodetail-3334175.html