Javascript

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函数的理解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!