slot 作用域插槽,属性验证,过渡效果 && 动画,VUE生命周期,过滤器

最新推荐文章于 2022-07-19 14:34:29 发布

ywjywjywjy

最新推荐文章于 2022-07-19 14:34:29 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/ywjywjywjy/article/details/93771051

版权

本文介绍了Vue中slot的作用域插槽，包括新旧用法的区别；详细讲解了属性验证的多种方式，强调了生命周期的重要性，并给出了验证的例子；讨论了过渡效果和动画的应用，包括不同模式的过渡效果；最后回顾了Vue的生命周期，强调了不同阶段的钩子函数用途。

摘要由CSDN通过智能技术生成

slot 作用域插槽

旧： slot-scope

- 使用流程

- 在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上

- 在组件使用时，通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据

- 通过 slotProp.xxx 就可以进行使用了

   <!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>

新： v-slot

   <Hello>

      <template v-slot:default = "slotProp">

        {
  { slotProp.msg }}
      </template>

    </Hello>

  </div>

  <template id="hello">

    <div>

      <slot name = "default" :msg = "msg"></slot>
    </div>

  </template>

  new Vue({
   

    components: {
   

      'Hello': {
   

        template: '#hello',

        data () {
   

          return {
   

            msg: 'hello'

          }

        }

      }

    }

  }).$mount('#app')

属性验证

案例：价格的增加，拿到的数据必须做验证 309 + 10 319 30910

<!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">