Home Vue Vue3

# teleport 基本使用

# App

vue
<template>
  <div class="app">
    <teleport to="#neko">
      <h2>当前计数</h2>
      <button>+1</button>
      <HelloWorld></HelloWorld>
    </teleport>
  </div>
</template>
<script>
import HelloWorld from "./HelloWorld";
export default {
  components: {
    HelloWorld,
  },
};
</script>
<style  scoped></style>
# Hello World


vue
<template>
  <div>
    <h2>Hello World</h2>
  </div>
</template>
<script>
  export default {
  }
</script>
<style scoped></style>
参考结果：


teleport_default


teleport：移动到 Vue app 之外的其它位置


    

  • to：指定将其中的内容移动到的目标元素，可以使用选择器；
    • 

  • disabled：是否禁用 teleport 的功能
    • 



# plugins_object


# plugins_object


js
export default {
  install(app) {
    console.log(app);
    // 全局属性添加 name  $ 开头约定熟成的命名习惯
    app.config.globalProperties.$name = 'aimer'
  }
}
# main.js


js
import { createApp } from 'vue'
import App from './App.vue'
import pluginObject from "./plugins/plugins_object"
const app = createApp(App);
app.use(pluginObject)
 
app.mount('#app');
# App


vue
<template>
  <div class="app">
    <teleport to="#neko">
      {{ name }}
    </teleport>
  </div>
</template>
<script>
import { getCurrentInstance } from "vue";
export default {
  setup() {
    // 拿到组件实例
    const instance = getCurrentInstance();
    const name = instance.appContext.config.globalProperties.$name;
    console.log(instance.appContext.config.globalProperties.$name);
    return {
      name,
    };
  },
};
</script>
<style  scoped></style>
参考结果：


plugins_object


# plugins_function


# plugins_object


js
export default {
  install(app) {
    console.log("pluginsObject",app);
    // 全局属性添加 name  $ 开头约定熟成的命名习惯
    app.config.globalProperties.$name = 'aimer'
  }
}
# plugins_object


js
export default function(app) {
  console.log("pluginsFunction:",app);
}
# main.js


import { createApp } from 'vue'
import App from './04_teleport内置组件/App.vue'
import pluginObject from "./plugins/plugins_object"
import pluginsFunction from './plugins/plugins_function';
const app = createApp(App);
app.use(pluginObject)
app.use(pluginsFunction)
 
app.mount('#app');
# App


vue
<template>
  <div class="app">
    <teleport to="#neko">
      {{ name }}
    </teleport>
  </div>
</template>
<script>
import { getCurrentInstance } from "vue";
export default {
  setup() {
    // 拿到组件实例
    const instance = getCurrentInstance();
    const name = instance.appContext.config.globalProperties.$name;
    console.log(instance.appContext.config.globalProperties.$name);
    return {
      name,
    };
  },
};
</script>
<style  scoped></style>
参考结果：


plugins_function