Vue高级

最新推荐文章于 2023-07-13 16:10:33 发布

yxskr

最新推荐文章于 2023-07-13 16:10:33 发布

阅读量358

点赞数

文章标签： slot 作用域插槽属性验证过滤器

本文链接：https://blog.csdn.net/yxskr/article/details/93723680

版权

slot 作用域插槽
1. 旧： slot-scope

	* 使用流程

		* 在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上(<slot name = "default" :msg = "msg"></slot>)
		* 在组件使用时，通过slot-scope = "slotProp" 来接收slot标签身上绑定的数据( <template slot = "default" slot-scope = "slotProp">)
		* 通过 slotProp.xxx 就可以进行使用了( <p> {{ slotProp.msg }} </p>)
	* <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"><Hello><template slot = "default" slot-scope = "slotProp"><p> {{ slotProp.msg }} </p></template></Hello></div><template id="hello"><div><slot name = "default" :msg = "msg"></slot></div></template></body><script src="../../lib/vue.js"></script><script>Vue.component('Hello',{template: '#hello',data () {return {msg: 'hello'}}})new Vue({el: '#app'})</script></html>
2. 新： v-slot

new Vue({components: {'Hello': {template: '#hello',data () {return {msg: 'hello'}}}}}).$mount('#app')属性验证案例：价格的增加，拿到的数据必须做验证 309 + 10 319 30910 1. props: [ 'msg' ] 没有进行验证，知识单纯的接收了一个父组件传递来的数据 2. props: { attr: attrType } 进行普通属性验证 3. props: { type: typeType, default: value } 这里的default是为这个属性设置初始值 4. props: { validator ( val ) { return boolean }} 可以进行一个条件的比较

注意：除了以上形式的属性验证以外，将来工作中还可能遇到的是第三方封装的类库 vue-validate vee-validate …
过滤器
1.
什么是过滤器？用来格式化数据的一个函数 $ 10 ‘$’ + price 日期的格式化

vue 1.x 版本借鉴了 angular , 提供 10 个过滤器，包括有：日期小数点位数保留货币大小写等
Vue 2.x 废弃了这 10个过滤器，但是它提供了自定义过滤器的方式
1.
使用方式

1.

全局定义过滤器
2.

3. Vue.filter('timeFilter',function ( val,type ) { console.log( val ) //val 就是我们获得的数据 // return newVal return 的结果就是格式化之后的新数据 return的结果就是页面呈现的结果

var date = new Date ( val )

// 2019-6-26

return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
})

1.

局部定义过滤器

new Vue({
el: ‘#app’,
data: {
time: Date.now()
},
filters: { //过滤器的配置项
‘timeFilter’: function ( val,type ){
var date = new Date ( val )
return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
}
}
})
1.
过滤器要想获得我们的数据，要通过一个叫做 ‘管道符 | ’ 来获取数据
2.
过滤器是对已经有的数据进行格式化，也就是必须先有数据，在去格式化

yxskr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue高级

slot 作用域插槽1. 旧： slot-scope * 使用流程 * 在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上(<slot name = "default" :msg = "msg"></slot>) * 在组件使用时，通过slot-scope = "slotProp" 来接收slot标签身上绑定的数据( ...
复制链接

扫一扫