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