vue3技巧与新增功能

实用的内置组件

teleport

teleport是vue3新增的内置组件，作用是制定某些组件渲染到哪些部分

to="body" 意思就是playlist组件渲染到body组件下适用于全屏类以及弹层类组件

<template>
  <teleport to="body">
  。。。
</teleport>
</template>

阻止冒泡

<div @click.stop></div>

如果在外层阻止，则不需要任何回调，例如：

<div
  @click="hide"
>
    <div class="list-wrapper" @click.stop>
          <i class="icon"
            @click.stop="changeMode"
          ></i>
    </div>
</div>

如果在list-wrapper上加stop那么list-wrapper里面的元素上的点击事件都可以去掉stop了，因为在父元素层就阻止了，不会冒泡到最外层

transition-group

<transition-group ref="listRef"
                  name="list"
                  tag="ul"
>
   <li @click="delete">...</li>
</transition-group>

.list-enter-active, .list-leave-active {
  transition: all 0.3s;
}

.list-enter-from, .list-leave-to {
  height: 0 !important;
}

这里delete实现的效果是当列表中元素被删除的时候，被删除的Li的高度逐渐变为0。

transition-group可以给其中的元素添加动画

组件传递布尔类型的props

// 在child组件中：
props： {
    // 如此设置默认就是false
    rank:Boolean
}

// 在父组件使用时，直接写rank那么就是代表传入的rank是true了
<child rank></child>

@指向src目录+require实现动态拼接

在Vue项目中，如果你想引用src目录下其他路径的图片，你可以使用相对路径或者绝对路径。

你有一个图片位于src/assets/images文件夹下，你可以这样引用它：

<img src="@/assets/images/your-image.png" alt="Your Image">

@是一个别名，通常在Vue项目中配置为src目录的别名，这样可以确保无论在何处引用src目录下的资源时都使用相同的路径。

vue3中无需配置，仅做记录

const path = require('path');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
};

但是，@如果在字符串动态拼接中使用，就会有问题，浏览器会直接将@渲染出来，而不会去解析它。

<img :src="`@/assets/images/${yourImage}`" alt="Your Image">

用计算属性也不行

<img :src="imgSrcPath">
computed: {
            imgSrcPath() {
                return '@/assets/lawyer-png.png';
            }
}

这时候就要使用require了，去实现动态的拼接

imgSrcPath() {
           return require('@/assets/lawyer-png.png')
}

 imgSrcPath() {
                return require(`@/assets/${this.imgSrc}`)
}