第十九节——vue内置组件

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

一、 和

1、概念

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

2、参数

name 属性

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

tag 属性

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

3、例子

二、

1、概念

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

2、参数

is

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

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

3、例子

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

三、

1、概念

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

2、参数

include缓存name为xxx的组件

exclude不缓存name为xxx的组件

3、例子

4、相关生命周期

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

四、

1、概念

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

2、参数

to

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

3、例子

Open Modal


  

    
Hello from the modal!
    Close
  

五、

插糟同插槽那节课

六、 和

组件用于在Vue路由中渲染匹配到的组件，根据当前的路由状态动态地渲染对应的组件内容。 组件用于生成路由链接，提供了一种声明式的方式来导航到不同的路由