Vue学习计划-Vue2--VueCLi(六)插槽、过渡

2023-12-15 12:34:31

写在最前:父组件引用子组件,如何能在应用子组件内容的同时,还能在自定义内容呢?

1. 插槽

  1. 作用: 让父组件可以向子组件指定位置插入html结构,也是一种组件通信的方式,适用于父组件===>子组件
  2. 分类: 默认插槽,具名插槽,作用域插槽
  3. 使用方式:
    1. 默认插槽
    父组件中:
    
    <MyContainer>
      <div>html结构</div>
    </MyContainer>
    
    子组件中:
    <template>
        <div>
            <!-- 定义插槽 -->
            <slot>插槽默认内容</slot>
        </div>
    </template>
    
    1. 具名插槽
    父组件中:
    
    <MyContainer>
      <template slot="content">
       <div>html结构</div>
      </template>
      <template v-slot:content>
        <div>html结构</div>
      </template>
    </MyContainer>
    
    子组件中:
    <template>
        <div class="container">
            <!-- 具名插槽 -->
            <slot name="content">插槽默认内容</slot>
            <slot name="footer">插槽默认内容</slot>
        </div>
    </template>
    
    1. 作用域插槽
      1. 理解:数据在组件自身,但根据数据生成的结构需要组件的使用者来决定。
      2. 具体编码:
    父组件:
     <template slot-scope="list">
        <h3  v-for="(item,index) in list.data" :key="index">{{ item }}</h3>
    </template>
    
    子组件:
    <template>
        <div>
            <slot :data="fineList"></slot>
        </div>
    </template>
    <script>
    export default {
        data(){
            return {
              fineList: [ 'node', 'yarn', 'npm', 'cnpm']
            }
        }
    }
    
    
    </script>
    

示例:准备两个组件:父组件App.vue,子组件MyContainer.vue
1. 父组件App.vue内:
在这里插入图片描述
2. 子组件MyContainer.vue内:
在这里插入图片描述
3. 运行效果:
在这里插入图片描述

2. 过渡

  1. 作用:在插入、更新或移除DOM时,在合适的时候给元素添加样式类名
  2. 写法:
    1. 准备好样式:
      • 元素进入的样式
        1. v-enter:进入的起点
        2. v-enter-active:进入过程中
        3. v-enter-to: 进入的终点
      • 元素离开的样式:
        1. v-leave:离开的起点
        2. v-leave-active:离开过程中
        3. v-leave-to: 离开的终点
    2. 使用<transition>包裹要过渡的元素,并配置name属性
      示例:
    <transition name="show">
        <h1 v-show="flag">showContent</h1>
    </transition>
    <style>
    	.anmi-enter {
    	  opacity: 0;
    	}
    	.anmi-enter-active {
    	  transition: all 1s;
    	}
    	.anmi-enter-to {
    	  opacity: 1;
    	}
    	.anmi-leave {
    	  opacity: 1;
    	}
    	.anmi-leave-active {
    	  transition: all 1s;
    	}
    	.anmi-leave-to {
    	  opacity: 0;
    	}
    </style>
    
    1. 备注:若有多个元素需要过渡,则需要使用<transition-group>,且每个元素都有指定key
      示例:
<template>
  <div>
    <TransitionGroup name="anmi" tag="ul" class="list">
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
        <button @click="list.pop()">删除</button>
      </li>
    </TransitionGroup>
    <button @click="list.push({ id: list.length, name: list.length + '小' })">
      添加
    </button>
  </div>
</template>
<script>
	export default {
	  data() {
	    return {
	      list: [
	        { id: 0, name: "小明" },
	        { id: 1, name: "小红" },
	        { id: 2, name: "小白" },
	      ],
	    };
	  },
	};
</script>
<style>
	.anmi-enter-active {
	  animation: move 1.5s;
	}
	.anmi-leave-active {
	  animation: move 1.5s reverse;
	}
	@keyframes move {
	  0% {
	    opacity: 0;
	  }
	  100% {
	    opacity: 1;
	  }
	}
</style>

文章来源:https://blog.csdn.net/qq_35940731/article/details/135005993
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。