丁鹿学堂前端培训：vue3内置组件总结（一）vue3中的provide和inject 他们是一种祖孙间的通讯方式，和vu

vue3中的provide和inject

他们是一种祖孙间的通讯方式，和vue2中的作用是一样的，只是api的写法上有区别

祖先组件引入provie，调用函数即可注入数据，准备给后代使用

import {ref,provide} from 'vue'
  setup(){
    let value = ref(0)
    provide('value',value)
    return {value}
  }

在后代选择器中使用

import {inject} from 'vue'
  setup () {
    let value = inject('value')
    return {value}
  }

vue3中的新组件

fragment

fragment是vue3内置的一个虚拟标签。在vue2中我们html模板都需要一个跟标签，而在vue3中没有这个限制了，就是因为vue3内置了fragment虚拟标签把他们包裹了起来。注意：fragment是不参与渲染的优点：减少标签嵌套，节约内存占用

teleport

teleport是传送api，该组件需要一个目标元素，该元素通过一个HTMLElement或querySelector字符串的属性提供的，可以将内容添加到目标元素中，通常用于显示通知或提示窗口，显示在组件的不同位置，可以用teleport轻松实现。使用代码：

    <div>
        <input type="text" v-model="keyWord">
        <div>{{keyWord}}</div>
         <teleport to="body">
          <div>
           你好，我是弹窗
          </div>
        </teleport>
    </div>

比如组件嵌套了，你的dom内容自然也在组件下面，定位或者其他样式会受到父级组件的影响。而teleport可以让你包裹的dom元素的层级传送到指定位置。一般是放在body下面，这样样式定位都不受影响了。常见的UI组件库的弹窗会用到这个api