Teleport

Teleport

什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

 

例子 : 

父 : 

<template>
    <div class="zu">
      <h1>祖先组件 : {{zu.name}}</h1>
      <Home></Home>
    </div>
</template>

<script>
  import Home from './Home.vue'
    import { ref ,provide}    from 'vue'
    export default {
        name: 'App',
    components:{
      Home
    },
        setup() {
      let zu = ref({
        name:'我是祖先哦',
      })
      provide('fu',zu)

      return{
        zu
      }
        }
    }
</script>
<style scoped>
.zu{
  background-color: gray;
  padding: 10px;
}
</style>

 

子 : 

<template>
  <div class="home">
    <h2>子组件</h2>
    得到父组件传递的数据 : {{body.name}}
    <sun></sun>
  </div>
</template>

<script>

import sun from './sun.vue'
import {inject} from 'vue'
export default {
  components:{sun},
  name: "Home",
  setup(){
    // 得到父组件传递的数据
    let body = inject('fu')

    return {
      body
    }
  }
};
</script>

<style scoped>
.home{
  background-color: green;
  padding: 10px;
}
</style>

 

孙 :

<template>
    <div class="sun">
        <h3>孙组件</h3>
        得到父组件传递的数据 : {{sun.name}}
       <abc></abc>
    </div>
</template>

<script>
import {inject} from 'vue'
import abc  from './dialog.vue'
export default {
    name: '',
    components:{abc},
    setup(){
        // 得到父组件传递的数据
        let sun = inject('fu')
        return {
            sun
        }
    }
};
</script>

<style scoped>
.sun{
  background-color: red;
  padding: 10px;
}

</style>

 

teleport组件

<template>
    <div >
        <button @click="bool=true">点击弹窗</button>
        <teleport to='body'  >
            <div class="men" v-if="bool">
                <div class="warp" >
                <div class="name">111111</div>
                <div class="name">111111</div>
                <div class="name">111111</div>
                <div class="name">111111</div>
                <div class="name">111111</div>
                <div class="name">111111</div>
                <div class="name">111111</div>
                <div class="name">111111</div>
                <div class="name">111111</div>
                <button @click="bool = false">关闭弹窗</button>
            </div>
            </div>
        </teleport>
    </div>
</template>

<script>
import {ref} from 'vue'
export default {
    name: 'Vitevue3Dialog',
    setup(){
        let bool = ref(false)
        return {
            bool
        }
    }

};
</script>

<style  scoped>
.men{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
}
.warp{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    background-color: #a1a;
}
</style>