vue3.0学习记录(5)_setup(prors.context)-CSDN博客

本文记录Vue3.0的学习，重点介绍setup函数的props和context参数，以及新功能Teleport如何实现组件与视图平级展示，通过实例展示了如何创建和使用一个弹窗组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setup

setup 接收两个参数

props：可以访问组件传入的 prors 属性，而且会自动推论成 props这个属性中定义的类型。
context：在 setup 中无法访问vue2中最常用的this对象，这个context提供了this上最常用的三个属性 1. context.attrs 对应 vue2中的 $attrs 属性 2.context.slots 对应 vue2中的 slots 插槽 3.context.emit 对应 vue2中的 emit 发送事件这几个值在每次使用的时候都会拿到最新的值

vue3新推出的功能 Teleport

可以让自定义组件与视图平级。
一个简单的弹窗组件如：

<template>
    <teleport to="#bigmodel">
        <div class="bigbox">
            <h1><slot>test</slot></h1>
        </div>
    </teleport>
</template>

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

export default defineComponent({
 name: 'bigModel',
 props: {
      isOpen:Boolean
  },
  emits:{
      'close-model':null
  },
  setup(props,context){
      const buttonCilck = () => {
        context.emit('close-model')
      }
      return {
          buttonCilck
      }
  }
});
</script>

<style scoped>
.bigbox{
    width: 200px;
    height: 200px;
    position: fixed;
    background: #ffffff;
    border: 2px solid #000000;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>

在App.vue中引入此组件

<template>
  <div>
    <bigModel :isOpen="modelisOpen" @close-model = "closeModel">开心</bigModel>
    <button @click="openModel">打开弹窗</button>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import bigModel from './components/bigModel.vue';

export default defineComponent({
  name: 'App',
  components: {
    bigModel
  },
  setup(){
  	const modelisOpen = ref(false)
    const openModle = () => {
      modelisOpen.value = true
    }
    const closeModle = () => {
      modelisOpen.value = false
    }
    return{
    	modelisOpen,
    	openModel,
    	closeModel 
    }
  }
});
</script>

并且在index.html新增一条：

<div id="app"></div>
<div id="bigmodel"></div>

就可以实现该弹窗组件了