有很多问题老师
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
同学你好,对于你的问题解答如下:
1、在vue中这样使用swiper组件是规定的格式。可以参考npm社区中提供的插件使用格式讲解: https://www.npmjs.com/package/vue-awesome-swiper
2、老师提供的文档是查看swiper相关属性的官方文档,swiper属性大多是通用的,所以在vue中也可以使用文档中提供的属性。
3、validator是vue提供的一个方法,当我们使用在子组件中使用props接收父组件传递的参数时,会自动触发这个方法,检验是否符合我们的要求。
例如:老师这段代码中书,在方法中规定了indicator必须是“on”或者“off”。如果是其他的,则不满足这个验证条件,浏览器则会给出一个控制台的警告。
4、type属性是vue自带的的,用来验证props的类型的。示例:type:String表示传入的props必须是字符串类型
5、default属性也是vue自带的,用来设置props默认值的。示例:default:'on',表示当父组件没有给子组件传值时 ,就是用默认值on
6、使用swiper插件的固定写法,所以是直接使用import 'swiper/css/swiper.css'这种形式引入。
可以参考前面第一条中的文档中有详细的讲解示例,如下:
祝学习愉快~
同学你好,对于你的问题解答如下:
1、validator是一个自定义验证函数,主要用来验证的传递是否符合条件,并不是将返回的布尔值作为传递的参数值。写一个例子,参考理解一下,在这个函数中,我们规定了indicator必须是“on”或者“off”。如果是其他的,则不满足这个验证条件,浏览器则会给出一个控制台的警告。
例如在父组件调用子组件时,传递一个“hah”,这个是不满足上面的验证条件的。
控制台就会给出警告,这样当我们不小心传递错误,可以及时进行改正。
2、data(){return{}}写法的好处可以参考如下解析理解:
因为子组件是一个可复用的,当你引用一个组件时,如果组件里的data是一个普通的对象,那么所有用到这个组件的都引用的是同一个data,会造成数据污染。所以将data封装成函数后,使用return返回对应的数据,在用到这个组件时,我们只是调用了data函数生成的数据副本,避免了数据污染。
这种是vue固定的写法,同学了解下好处之后,需要记住这种写法。
3、是的,这些参数都是swiper插件自带的。具体可以参考官方文档:https://www.swiper.com.cn/api/index.html
目前课程中重点是学习vue框架,在第三阶段中,详细的讲解了swiper的相关用法,所以这里不会再对swiper插件进行详细的讲解。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星