Vue3新增特性之全局config.globalProperties和Teleport内置组件

1、在Vue3中，通过`createApp()`方法创造的应用实例会暴露一个 `config` 对象允许我们配置一些应用级的选项，例如全局变量。2、Teleport是 Vue 3 的新增的内置组件，用于将组件内的子节点传输/移动到整个页面 DOM 树的其他DOM节点下。其接收一个 to属性来指定传送的目标。to属性的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。

努力的小朱同学

3593人浏览 · 2024-01-27 21:06:05

努力的小朱同学 · 2024-01-27 21:06:05 发布

1、全局config.globalProperties

在Vue3中，通过createApp()方法创造的应用实例会暴露一个 config 对象允许我们配置一些应用级的选项，例如可在main.js中通过app.config.globalProperties.***声明定义一个应用级的全局变量。但该方式需要借助Vue3的createApp()方法，因此只能在Vue3及之后的版本中使用。

而且通过app.config.globalProperties定义的全局变量不支持双向绑定。因为这种方式只是将变量添加到Vue实例的原型链上，使得在组件中可以通过this关键字来访问全局变量，因此该方式适用于初始定义变量值之后，基本不会进行改动，且不需要双向绑定的情况。

还有要注意一点是：进行任何全局配置，都要确保在挂载Vue应用实例之前完成所有应用配置，否则配置会无效，所以我们不能在 config 对象中使用异步操作的数据进行配置。

main.js文件定义全局变量：

// 导入createApp()函数
import { createApp } from 'vue'
// 导入App组件
import App from './App.vue'
// 创建App应用返回对应的实例对象
const app = createApp(App);
// 挂载全局变量
app.config.globalProperties.$overallObj = { value: 111, name: '全局对象' };
app.config.globalProperties.$overallString = '111全局字符串11111';
// 挂载实例对象
app.mount('#app')

单文件组件（`.vue`文件）中，调用全局变量：

<template>
  <div>
    <h1 @click="changeValue()">
      这个地方是调用的main.js中定义的全局字符串 --- {{ this.$overallString }}
    </h1>
    <h1>这个地方是调用的main.js中定义的全局对象 --- {{ this.$overallObj }}</h1>
  </div>
</template>

<script>
export default {
  methods: {
    changeValue() {
      console.log("修改前的全局字符串---", this.$overallString);
      console.log("修改前的全局对象---", this.$overallObj);
      this.$overallString = "我是改变后的全局字符串";
      this.$overallObj.name = "我是改变后的全局对象";
      console.log("修改后的全局字符串---", this.$overallString);
      console.log("修改后的全局对象---", this.$overallObj);
    },
  },
};
</script>

页面效果：

初始效果，页面正常渲染全局变量的值。

在这里插入图片描述

触发点击事件后，变量值发生改变，但是页面展示并没有进行更新，因为全局变量是没有双向绑定的。

在这里插入图片描述

2、`<Teleport>`内置组件

在某些情况下，我们希望组件的某些内容不渲染在当前组件的位置，而是渲染到别的DOM元素下面。最常见的场景就是模态框弹窗组件的实现，我们可以通过给弹窗设置position: fixed;来做到全屏展示，但是这样写必须限制祖先元素的样式不能有 transform、perspective 或者 filter 样式属性，因此不太友好。Vue3给我们提供了一种新的实现方案，就是<Teleport>内置组件。

<Teleport> 是 Vue 3 的新增的内置组件，用于将组件内的子节点传输/移动到整个页面 DOM 树的其他DOM节点下。<Teleport> 接收一个 to 属性来指定传送的目标。to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。设置完成后，触发页面渲染成，就会发现组件内的子节点渲染到了目标DOM元素下，成为其子节点。前面我们所说的模态框弹窗组件，我们就可以利用<Teleport> 将其挂载到<body>元素下，然后使其不受到祖先元素样式的限制和影响。

但是<Teleport> 挂载时，要确保传送的 to 目标必须已经存在于 DOM 树中，否则会挂载失败。而且<Teleport> 只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系，除了挂载位置改变，其余椅不受任何影响。例如：<Teleport> 内部的节点能够正常的与其所在的单文件组件(.vue文件)内的数据进行数据交互和数据的双向绑定，并且正常的受到单文件组件<style>内样式的控制，即使有scoped属性也不会影响。

组件代码：

<template>
  <div>
    <!-- 指定内部节点渲染到body元素下 -->
    <Teleport to="body">
      <h1 class="h1" @click="changeText">{{ text }}</h1>
    </Teleport>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: '这个元素用来测试Teleport内置组件的作用'
    };
  },
  methods: {
    changeText() {
      this.text = '这个元素被点击了';
    }
  },
};
</script>
<style lang="scss" scoped>
.h1 {
  text-align: center;
  margin-top: 50px;
}
</style>

页面效果：

初始状态，Teleport内置组件内的节点被渲染到body元素下，并且变量能正常渲染，样式也能被控制。

在这里插入图片描述

点击元素后，绑定的变量值被修改，页面触发更新。

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^