[JavaScript知识库]vue3.0 中的provide和reject使用，$refteleport

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <modal :isOpen="modalisopen" @close-modal="onCloseModal">
    插槽
  </modal>
  <div id="test"></div>
  <button @click="openModal" ref="modal">打开模态框</button>

  <div class="box">
    <div class="box1">
      <div class="box2" v-for="(item,index) in arr1" :key="index" :id="`row1-${index}`">{{item}}</div>
    </div>
    <div class="box1">
      <div class="box2" v-for="(item,index) in arr2" :key="index" :id="`row2-${index}`">{{item}}</div>
    </div>
    <div class="box1">
      <div class="box2" v-for="(item,index) in arr3" :key="index" :id="`row3-${index}`">{{item}}</div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, onMounted, nextTick, Ref, provide} from 'vue';
import modal from './components/modal.vue';

export default defineComponent({
  name: 'App',
  components: {
    modal
  },

  setup() {
    // $ref使用
    const modal: Ref<HTMLElement | undefined> =ref<HTMLElement>()
    // provide 的使用
    const name:Ref<string> = ref('zz')
    // 以下是横向瀑布流dome，定义的数组
    let arr1:string[] = reactive([])
    let arr2:string[] = reactive([])
    let arr3:string[] = reactive([])
    onMounted(async () => {
      // $ref 修改dom时，需要判空，不然会报错
      let mymodal = modal.value
      console.log(mymodal)
      if (mymodal){
        mymodal.style.backgroundColor= 'red'
      }
      // 关于瀑布流代码
      let data:string[] = ['设aa计狮','英文zfq1 8','起作用 8','只对中文起作用 8',
        '言和非亚洲语言的 8','椭圆形备份 8','椭圆形备份 8','强制不换行 8',
        '意字内 8','椭圆形备aa份','以省略号形式 8','言文本 8',
        '语言的no 8','亚洲语言和 8','允许在字内换行 8','，不允许 8',
        '文本的非亚洲文 8',]
      let r1 = 0;
      let r2 = 0;
      let r3 = 0
      console.log(data.length)
      let n=0
      let m=0
      let v=0
      for (let i =0;i<data.length;i++) {
        let min = Math.min(r1,r2,r3)
        if (min === r1){
          n++
          arr1.push(data[i])
          await new Promise(resolve => setTimeout(resolve,10))
          let bb = document.querySelector(`#row1-${arr1.length-1}`)
          // console.log(document.querySelector(`#row1-${arr1.length-1}`))
          if (bb){
            r1 += bb.clientWidth
          }
        } else if (min === r2){
          m++
          arr2.push(data[i])
          await new Promise(resolve => setTimeout(resolve,10))
          let cc =  document.querySelector(`#row2-${arr2.length-1}`)
          if (cc){
            r2 +=cc.clientWidth
          }
        } else if (min === r3){
          v++
          arr3.push(data[i])
          await new Promise(resolve => setTimeout(resolve,10))
          let dd =  document.querySelector(`#row3-${arr3.length-1}`)
          if (dd){
            r3 +=dd.clientWidth
          }
        }
      }
      console.log(n,m,v)
    })
    // provide 传值
    provide('name',name)
    
    // 关于传送门的代码
    const modalisopen = ref(false)
    const onCloseModal = () => {
      modalisopen.value = false
    }
    const openModal = () => {
      modalisopen.value = true
    }

    return {
      modalisopen,
      onCloseModal,
      openModal,
      arr1,
      arr2,
      arr3,
      name,
      modal
    }
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.box {
  margin: 0 auto;
  height: 200px;
  width: 300px;
  padding: 40px;
  overflow-x: scroll;
  border: 1px solid sandybrown;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.box1 {
  display: flex;
}

.box2 {
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
  border: 1px solid paleturquoise;
  margin-left: 10px;
}
</style>

moadl.vue

<template>
  <teleport to="#app">
    <div class="modal"  v-if="isOpen" >
      <div id="center">
        <h2>
          <slot>this is a modal</slot>
        </h2>
        <button @click="clickButton" ref="mymo">关闭模态框{{name}}</button>
      </div>
    </div>
  </teleport>
</template>

<script lang="ts">
import {defineComponent, inject,onMounted} from 'vue';

export default defineComponent({
  name: 'modal',
  // 接收父组件传值props方式
  props: {
    isOpen: Boolean
  },
  emits:{
    'close-modal':null
  },
  setup(props,cc){
    // 关闭传送门，触发父组件方法
    const clickButton = ()=>{
      cc.emit('close-modal')
    }
    // inject 接收父组件provide 传递的值
    let name:unknown = inject('name')
    onMounted(()=>{
      console.log(1)
    })
    return {
      clickButton,
      name,
    }
  }
});
</script>

<style scoped>
.modal{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.6);
}
#center {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background: white;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}
</style>