关于Vue中新老版本slot插槽，属性验证validator,过滤器fliter的用法

最新推荐文章于 2024-05-14 11:02:19 发布

congboer

最新推荐文章于 2024-05-14 11:02:19 发布

阅读量566

点赞数

分类专栏： Vue 文章标签： Vue slot新老版本插槽 filter过滤器 validator属性验证简单用法

本文链接：https://blog.csdn.net/congboer/article/details/93770043

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

关于Vue中新老版本slot插槽，属性验证validator,过滤器fliter的用法

1、插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

1-1、老版本slot插槽：

<body>
    <div id="app">
        <Okay>
            <!-- 在组件里面写template是不会被渲染的，只会渲染下面的p标签 -->
            <!-- 这里的slot可以将这个模板与下面的模板联系起来，slotProp用来
            接收下面绑定在模板slot上的 :msg属性，那么对应的数据也会得到，这
            个slotProp可以随意书写,插槽默认插槽名为default -->
            <template slot="default" slot-scope="slotProp">
                <!-- 然后，msg就可以当作slotProp的属性'.'来操作了 -->
                <p>{{ slotProp.msg }}</p>
            </template>
        </Okay>
    </div>
    <!-- 这个模板是预留给未来数据的，用的插槽 -->
    <template id="okay">
        <div>
            <!-- :msg单向数据绑定 -->
            <!-- 上面的 slot="default"用了这里slot的name名，所以这里的slot
            就指向了上面的template，这里给插槽取name，也就是具名插槽-->
            <slot name="default" :msg="msg"></slot>
        </div>
    </template>
</body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        Vue.component('Okay',{//这里是对okay组件进行注册,组件名
            template:'#okay',//这里是组件的配置项
            data(){//这里data用函数的形式是为了产生一个自己的私有作用域，来
            //存储自己的数据
                return {
                    msg:'hello the world'
                }
            }
        })
        new Vue({
            el:'#app'
        })
    </script>

1-2、新版slot插槽

<body>
    <div id="app">
        <Hahaha>
            <!-- 这里一般用v-slot:default，相比旧版本，就这里有些许变化
            v-slot指令融合了插槽名slot=""和作用域插槽slot-scope=""
            而且，用v-slot指令，是必须在外层写template的，指令写在这个标签里 -->
            <template v-slot:name="slotProp">
                <p>{{ slotProp.msg }}</p>
            </template>
        </Hahaha>
    </div>

    <template id="hahaha">
        <div>
            <slot name="name" :msg="msg"></slot>
        </div>
    </template>

</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    Vue.component('Hahaha',{
        template:'#hahaha',
        data(){
            return {
                msg:'哈哈哈'
            }
        }
    })

    new Vue({
    }).$mount('#app')
</script>

2、属性验证：

props: [ ‘msg’ ] 没有进行验证，只是单纯的接收了一个父组件传递来的数据
props: { attr: attrType } 进行普通属性验证
props: { type: typeType, default: value } 这里的default是为这个属性设置初始值
props: { validator ( val ) { return boolean }} 可以进行一个条件的比较

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

<body>
    <div id="app">
        <father></father>
    </div>

    <template id="father">
        <div>
            <h3>这里是父组件</h3>
            <son :aa="money" v-bind:bb="like"></son>
            <!-- 这里的aa，bb单向绑定了父组件的数据 -->
        </div>
    </template>
    <template id="son">
        <div>
            <h3>这里是子组件</h3>
            <!-- 所以这里就可以用父组件的数据了 -->
            <p> 老爸给了我{{aa}}块 </p>
            <p>我喜欢打 {{ bb }}</p>
        </div>
    </template>
</body>
    <script>
        Vue.component('father',{
            template:'#father',
            data(){
                return {
                    money:5000,
                    like:'basketball'
                }
                    
            }
        })

        Vue.component('son',{
            template:'#son',
            // props:['aa','bb']
            props:{//props用来接收父子组件由父组件传来的数据
                'aa':{

                    validator(val){
                        return val>1000
                    }
                },
                'bb':String
            }
        })

        new Vue({
            el:'#app'
        })
    </script>

3、过滤器filter

什么是过滤器？用来格式化数据的一个函数(过滤器是对已经有的数据进行格式化，也就是必须先有数据，再去格式化)

vue 1.x 版本借鉴了 angular , 提供 10 个过滤器，包括有：日期小数点位数保留货币大小写等

Vue 2.x 废弃了这 10个过滤器，但是它提供了自定义过滤器的方式

全局写法：

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

<body>

    <div id="app">
        <!-- 这里time是下面的时间戳，‘|’是管道符，用来获取val数据的。 -->
        <!-- 可以自己选择连接的type符号 -->
        <p>{{ time | timefilter('/') }}</p>
    </div>

</body>
    <script>

        Vue.filter('timefilter', function( val , type ){
            //timefilter是过滤器的名称，function是回调函数，这里面的val指的就是上面p标签里面的time值。
            console.log(val)//1561546971840
            var date=new Date( val )
            return date.getFullYear() + type + (date.getMonth() + 1)+ type +date.getDate()
        })

        new Vue({
            el:'#app',
            data:{
            time: Date.now()//获取当前时间戳
            }
        })
    </script>

局部写法：

<body>
  <div id="app">
    <p> {{ time | timeFilter('/')}} </p>
  </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
  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()
      }
    }
  })
</script>

congboer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Vue中新老版本slot插槽，属性验证validator,过滤器fliter的用法

关于Vue中新老版本slot插槽，属性验证validator,过滤器fliter的用法1、插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制1-1、老版本slot插槽：<!DOCTYPE html>...
复制链接

扫一扫

专栏目录