Vue.js插槽与过渡效果详解-优快云博客

本文链接：https://blog.youkuaiyun.com/cfr1994/article/details/102729508

本文深入探讨了Vue.js中的插槽机制，包括普通插槽、命名插槽及作用域插槽的使用方法，并介绍了如何利用Vue的transition组件实现过渡效果，包括CSS过渡、动画钩子函数和第三方动画库的集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插槽（slot）

1. 普通插槽

<body>
  <div id="app">
    <Hello> <p> 你好 </p> </Hello>
    <!-- 正常情况下p标签并不显示在页面，因为hello会被解析为模板，里面的被忽略 -->
  </div>
  <template id="hello">
    <div>
      <h3> hello组件 </h3>
      <!-- 添加插槽，给组件的内容预留一个空间 -->
      <!-- 此时，p标签在页面会显示在h3标签下面 -->
      <slot></slot>
    </div>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  Vue.component('Hello',{
    template: '#hello'
  })
  new Vue({
    el: '#app'
  })
</script>

2. 命名插槽
	- 给slot加一个name属性

<body>
  <div id="app">
    <Hello> 
        <header slot = "header"> 头部 </header>
        <footer slot = "footer">底部</footer> 
    </Hello>
  </div>
  <template id="hello">
    <div>
      <slot name = "header"></slot>
      <h3> hello组件 </h3>
      <slot name = "footer"></slot>
    </div>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  Vue.component('Hello',{
    template: '#hello'
  })
  new Vue({
    el: '#app'
  })
</script>

3. 作用域插槽
	- 作用域插槽可以让本只能在组件的模板中使用的数据，应用到组件的内容中

<body>
  <div id="app">
    <Hello>
      <template v-slot:default = "scope">
        <p> {{ scope.money.num }}  </p>
        <p> {{ scope.money.name }}  </p>
      </template>
    </Hello>
  </div>
  <template id="hello">
    <div>
      <slot :money = "money"></slot>
    </div>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        money: {
          num: 100000,
          name: 'zhangsan'
        }
      }
    }
  })
  new Vue({
    el: '#app'
  })
</script>

注意：普通插槽、命名插槽是Vue 2.5.x的版本，Vue 2.6.x以上的版本将使用 v-slot 指令来代替2.5.x的使用方式

过渡效果

Vue框架使用css3过渡效果或是js动画
Vue内部提供了一个叫做 transition 的过渡组件
使用 transition 包裹过渡元素，那么会自动添加 6 个类名 8个钩子函数
- 默认类名开头 v
- 如果有name属性，那么使用这个name属性值作为类名开头
- 实现方式：

		1. 在 CSS 过渡和动画中自动应用 class 【 自己写 】
		2. 可以配合使用第三方 CSS 动画库，如 animate.css 【 推荐 】

<body>
  <div id="app">
    <button @click = "changeFlag"> changeFlag </button>
    <!-- name属性是为了区分，一位页面不止有一个transition -->
    <!-- mode  有两个值   in-out    out-in  过渡模式 -->
    <!-- in-out：新元素先进行过渡，完成之后当前元素过渡离开 -->
    <!-- out-in：当前元素先进行过渡，完成之后新元素过渡进入 -->
    <transition
      name = "Vue"
      mode = "in-out"
      enter-active-class = "animated fadeIn"
      leave-active-class = "animated fadeOut"
    >
      <p v-if = "flag"></p>
    </transition>
  </div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      flag: true 
    },
    methods: {
      changeFlag () {
        this.flag = !this.flag 
      }
    }
  })
</script>

		3. 在过渡钩子函数中使用 JavaScript 直接操作 DOM，Vue提供了8个javascript钩子，我们需要自定义js动画
		4. 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

过滤器

作用：
- 是对已经有的数据做数据格式化
使用格式
- 已有数据 | 过滤器名称(arg1,arg2)

<img 
     :src = "item.img | imgFilter "
     οnerrοr="this.style.visibility='hidden'"
     >

| 我们称之为管道符
定义

	- 全局定义
		- Vue.filter

<body>
  <div id="app">
    <button @click = "getTime"> 获得时间 </button>
    <p> {{ time | timerFilter( '-' ) }} </p>
  </div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* 过滤器 
    全局定义
      Vue.filter(过滤器名称，回调函数)
  */
 Vue.filter('timerFilter',function ( val,type ) {
  console.log( val ) // val 是格式化目标的值，这里就是date
  console.log( type ) // type 是 -
   var date = new Date( val )
   if ( val ) {
    return date.getFullYear() + type + (date.getMonth() + 1) + type + date.getDate() 
   } else {
     return ''
   }
 })
  new Vue({
    el: '#app',
    data: {
      time: ''
    },
    methods: {
      getTime () {
        this.time = new Date()
      }
    }
  })
</script>

	- 局部定义
		- filters选项

<body>
  <div id="app">
    <button @click = "getTime"> 获得时间 </button>
    <p> {{ time | timerFilter }} </p>
  </div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      time: ''
    },
    methods: {
      getTime () {
        this.time = new Date()
      }
    },
    filters: { // 局部定义
      'timerFilter': function ( val ) { // 过滤器名称：function(){}
        var date = new Date( val )
        if ( val ) {
          return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'
        } else {
          return ''
        }
      }
    }
  })
</script>