木灵鱼儿

木灵鱼儿

阅读：158

最后更新：2022/08/19/ 1:13:01

vue3 杂项

data选项

在vue3中，data选项已标准化为仅接受 function返回一个 object，在vue2的时候，data可以直接是一个object。

vue2：

<script>
  const app = new Vue({
    data: {
      apiKey: 'a1b2c3'
    }
  })
</script>

vue3:

<script>
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  }).mount('#app')
</script>

mixin 合并行为变更

虽然说vue3已经不再推荐使用mixin混入，但是还是提供了支持，但是由原来vue2的深度合并变成了浅合并。

假设我们现在有数据需要合并：

const Mixin = {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1
      }
    }
  }
}

const CompA = {
  mixins: [Mixin],
  data() {
    return {
      user: {
        id: 2
      }
    }
  }
}

vue2 得到的结果：

{
  "user": {
    "id": 2,
    "name": "Jack"
  }
}

vue3则是后一个覆盖前一个了：

{
  "user": {
    "id": 2
  }
}

自定义组件白名单

如果我们使用了自定义渲染器，那么在控制台，一般会输出一条警告，如果想要去除这个警告，我们需要配置一下自定义组件的白名单。

vue cli：

vue.config.js

rules: [
  {
    test: /\.vue$/,
    use: 'vue-loader',
    options: {
      compilerOptions: {
        isCustomElement: tag => tag === "自定义的组件名称"
      }
    }
  }
]

vit：

vite.config.js

module.exports = {
  vueCompilerOptions: {
    isCustomElement: tag => tag === "自定义的组件名称"
  }
}

自定义组件是一个函数，它接受一个tag（组件名），返回一个布尔值

配置完重启下项目，就不会再报警告了。

is

is一般用于动态组件，是一个特殊的attribute属性。

<!-- currentTab 改变时组件也改变 -->
<component :is="currentTab"></component>

但是有时候，我们的可能受于html的结构导致有些组件无法直接写在html中，比如table元素，它要求他的子元素必须是表格相关的元素，如果我们放入一个自定义的元素会导致结构发生问题，此时常见的做法使用一个tr元素，然后tr去设置is属性。

vue3中要求is的值必须是vue:开头的，这个和vue2不同。

<table>
  <tr is="vue:my-row-component"></tr>
</table>

最终这个tr会被组件给完全替换掉。

$scopedSlots属性移除，采用$slots

vue2的时候，获取插槽的数据需要通过this.$scopedSlots来获取，或者this替换成任意实例组件，在vue3时，则是通过this.$slots获取。

具体可以参考官方文档，这个我自己也用的少。

$slots

文章分类 vue3 快速上手
文章标签 datavue3mixinisCustomElementis$scopedSlots$slots
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 158

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 158

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译