有很多问题老师

有很多问题老师

        props:{

            direction:{

                type:String,

                default:'horizontal',

                validator(value){

                    return [

                        'horizontal',

                        'vertical'

                    ].indexOf(value) > -1;

                }

            },

这里接受的是传过来的参数,但是返回的布尔值啊,最后穿过的参数怎么获取的?


data(){return{}}这些写的好处老师说的没听明白是啥意思


data(){

            return{

                swiperOption:{

                    watchOverflow:true,

                    direction:this.direction,

                    autoplay:this.interval ?{

                        delay:this.interval,

                        disableOnInteraction:false

                    } : false,

                    slidesPreView:1,

                    loop:this.loop,

                    pagination:{

                        el: this.pagination ? '.swiper-pagination' : null

                    }

                }

            }

        }

    }

这个数据是swiper插件自带的吗?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕慕子 2020-05-08 16:57:03

同学你好,对于你的问题解答如下:

1、在vue中这样使用swiper组件是规定的格式。可以参考npm社区中提供的插件使用格式讲解: https://www.npmjs.com/package/vue-awesome-swiper 

2、老师提供的文档是查看swiper相关属性的官方文档,swiper属性大多是通用的,所以在vue中也可以使用文档中提供的属性。

3、validator是vue提供的一个方法,当我们使用在子组件中使用props接收父组件传递的参数时,会自动触发这个方法,检验是否符合我们的要求。

例如:老师这段代码中书,在方法中规定了indicator必须是“on”或者“off”。如果是其他的,则不满足这个验证条件,浏览器则会给出一个控制台的警告。

http://img1.sycdn.imooc.com//climg/5eb51d33094a112516940514.jpg

4、type属性是vue自带的的,用来验证props的类型的。示例:type:String表示传入的props必须是字符串类型

5、default属性也是vue自带的,用来设置props默认值的。示例:default:'on',表示当父组件没有给子组件传值时 ,就是用默认值on

6、使用swiper插件的固定写法,所以是直接使用import 'swiper/css/swiper.css'这种形式引入。

可以参考前面第一条中的文档中有详细的讲解示例,如下:

http://img1.sycdn.imooc.com//climg/5eb51e8609dfe3a216340546.jpg

祝学习愉快~

好帮手慕慕子 2020-05-08 10:35:34

同学你好,对于你的问题解答如下:

1、validator是一个自定义验证函数,主要用来验证的传递是否符合条件,并不是将返回的布尔值作为传递的参数值。写一个例子,参考理解一下,在这个函数中,我们规定了indicator必须是“on”或者“off”。如果是其他的,则不满足这个验证条件,浏览器则会给出一个控制台的警告。

http://img1.sycdn.imooc.com//climg/5eb4c2d609d8db1208880274.jpg

例如在父组件调用子组件时,传递一个“hah”,这个是不满足上面的验证条件的。

http://img1.sycdn.imooc.com//climg/5eb4c2e5092f740007360122.jpg

控制台就会给出警告,这样当我们不小心传递错误,可以及时进行改正。

http://img1.sycdn.imooc.com//climg/5eb4c2ff091b430621160768.jpg

2、data(){return{}}写法的好处可以参考如下解析理解:

因为子组件是一个可复用的,当你引用一个组件时,如果组件里的data是一个普通的对象,那么所有用到这个组件的都引用的是同一个data,会造成数据污染。所以将data封装成函数后,使用return返回对应的数据,在用到这个组件时,我们只是调用了data函数生成的数据副本,避免了数据污染。

这种是vue固定的写法,同学了解下好处之后,需要记住这种写法。

3、是的,这些参数都是swiper插件自带的。具体可以参考官方文档:https://www.swiper.com.cn/api/index.html  

目前课程中重点是学习vue框架,在第三阶段中,详细的讲解了swiper的相关用法,所以这里不会再对swiper插件进行详细的讲解。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 lcyjerry #1
    我想知道为什么在vue里是这么用的swiper组件,比如在data()return{}里定义参数,然后在:options传参
    2020-05-08 11:41:05
  • 提问者 lcyjerry #2
    官方文档写的也不是针对vue的
    2020-05-08 11:41:25
  • 提问者 lcyjerry #3
    还有这个验证函数为什么这样就能验证呢?什么type:String default;这样之类的,是vue的一种方法吗?
    2020-05-08 11:43:35
提问者 lcyjerry 2020-05-07 19:34:59

还有swiper组件的用法,需要有哪些参数要传,这些在文档里怎么查看?这个课也说得太潦草了吧

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师