vue3 setup函数的理解

本文主要是介绍vue3 setup函数的理解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

定义：

1.setup是处于beforecreate和created生命周期间的函数；

2.setup是组合式api的入口；

3.setup函数中定义的变量和方法都是需要return出去的，不然没有办法在模板中使用；

注意事项;

1.因为在setup中尚未执行created初始化完成，所以无法使用data，methods（vue2）；

2.因为在setup中无法使用data，methods，所以为了避免错误使用，vue将setup函数中的this转化成undefined；

3.setup是同步的，不能异步使用；

其他：

setup接收两个参数（props，context（包括attrs，slots，emit）），

1.props：

　　是一个对象，接收父组件传来的所有数据，你需要使用props：{}接收数据，如果你不配置props：{}，那么会得到undefined；

<template>
  <div class="box">
    父组件 
  </div>
  <no-cont :mytitle="msg" 
      othertitle="别人的标题"
      @sonclick="sonclick">
  </no-cont>
</template>

<script lang="ts">
import NoCont from "../components/NoCont.vue"
export default {
  setup () {
    let msg={
      title:'父组件给子给子组件的数据'
    }
    function sonclick(msss:string){
      console.log(msss)
    }
    return {msg,sonclick}
  },
  components:{
    NoCont
  }
}
</script>

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script lang="ts">
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
 //  未进行接受
 //   props:{
 //     mytitle:{
 //         type:Object
 //     }
 //   },
  setup(props,context){
    console.log('props==>',props.mytitle);//输出的值是 undefined
    function sonHander(){
        context.emit('sonclick','子组件传递给父组件')
    }
    return {sonHander}
  }
});
</script>

2.context：

　　该属性是获取props{}中没有被声明接收的所有对象；

这篇关于vue3 setup函数的理解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！