第十九节——vue内置组件

最新推荐文章于 2024-04-29 10:42:46 发布

爱在你心中

最新推荐文章于 2024-04-29 10:42:46 发布

阅读量309

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_57017198/article/details/134063979

版权

Vue提供了一些内置的组件，这些组件可以在Vue应用中直接使用，无需额外安装或配置。以下是一些常见的Vue内置组件

一、<transition> 和 <transition-group>

1、概念

<transition> 组件用于在元素插入或移除时应用过渡效果，例如淡入淡出、滑动等效果。<transition-group> 组件用于在多个元素同时插入或移除时应用过渡效果，并为每个元素添加唯一的过渡类名。这些组件提供了丰富的过渡效果和过渡钩子函数，使得在Vue应用中实现动画效果变得更加容易

2、参数

name 属性

name 属性用于指定过渡的名称，它在定义过渡样式和钩子函数时非常有用。通过为过渡样式类名添加 name 的前缀，可以确保不同过渡之间的样式不会相互冲突。同时，name 也用于在过渡钩子函数中标识当前过渡的名称，以便在需要时进行特定处理。

tag 属性

tag 属性用于指定过渡组件渲染的标签。默认情况下，<transition> 组件渲染为一个 span 标签，而 <transition-group> 组件渲染为一个 span 包裹的 span 标签。通过设置 tag 属性，你可以指定渲染为其他的标签，如 div、ul、ol 等，以满足你的实际需求

3、例子

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>

    <transition-group name="a" tag="ul">
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: "Item 1" },
        { id: 2, text: "Item 2" },
        { id: 3, text: "Item 3" },
      ],
      nextId: 4,
    };
  },
  methods: {
    addItem() {
      this.items.push({ id: this.nextId, text: `Item ${this.nextId}` });
      this.nextId++;
    },
    removeItem() {
      this.items.pop();
    },
  },
};
</script>

<style>
/* 
  激活时的过渡效果
  a 为 name定义的值
  -enter-active这部分写死

  过渡效果需要自己写
*/
.a-enter-active,
.a-leave-active {
  transition: opacity 0.5s;
}
.a-enter,
.a-leave-to {
  opacity: 0;
}
</style>

二、<component>

1、概念

<component> 组件用于动态地渲染组件，根据不同的条件或数据选择性地渲染不同的组件。它可以接收一个组件的名称或组件对象，并根据指定的组件动态地渲染内容

2、参数

is 属性是 <component> 组件的一个特殊属性，用于指定要渲染的组件或组件的名称。

通过使用 is 属性，我们可以实现动态组件的渲染，即根据数据的变化在运行时选择不同的组件进行渲染。这对于根据用户的操作或其他条件切换不同的视图非常有用

3、例子

根据选择动态渲染对应的组件

<template>
  <div>
    <select v-model="selectedComponent">
      <option value="ComponentA">Component A</option>
      <option value="ComponentB">Component B</option>
      <option value="ComponentC">Component C</option>
    </select>
    <component :is="selectedComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';

export default {
  data() {
    return {
      selectedComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB,
    ComponentC
  }
}
</script>

三、<keep-alive>

1、概念

组件用于缓存动态组件，以便在组件切换时保留其状态或避免重新渲染。它会缓存被包裹的组件的实例，并在组件切换时保持实例的状态，以提高应用的性能和响应性

2、参数

include缓存name为xxx的组件

exclude不缓存name为xxx的组件

3、例子

<template>
  <div>
    <select v-model="selectedComponent">
      <option value="ComponentA">Component A</option>
      <option value="ComponentB">Component B</option>
      <option value="ComponentC">Component C</option>
    </select>
    <keep-alive>
    	<component :is="selectedComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';

export default {
  data() {
    return {
      selectedComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB,
    ComponentC
  }
}
</script>

4、相关生命周期



export default {
  
  activated() {
    // activated 每次进入缓存也都都会执行
  },
  deactivated() {
    // 缓存组件被销毁时调用
  }
}

四、<Teleport>

1、概念

它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。这类场景最常见的例子就是全屏的模态框

2、参数

指定传送的目标。to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。

3、例子

<button @click="open = true">Open Modal</button>

<Teleport to="body">
  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</Teleport>