首页 > 其他分享> 文章详细

vue3 setup函数的理解

2022-04-20 22:04:31 阅读：315 来源： 互联网

标签：return 函数 setup vue3 context props 组件 NoCont

定义：

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{}中没有被声明接收的所有对象；

标签：return,函数,setup,vue3,context,props,组件,NoCont
来源： https://www.cnblogs.com/ysx1129/p/16171913.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3 setup函数的理解