setup的两个注意点：

  • setup执行的时机

    • 在beforeCreate之前执行一次，this是undefined。

  • setup的参数

    • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
    • context：上下文对象
      • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
      • slots: 收到的插槽内容, 相当于 this.$slots。*
      • emit: 分发自定义事件的函数, 相当于 this.$emit。

代码展示:

  • 父组件
    <template>
    	<Demo @hello="showHelloMsg" msg="你好啊" school="五邑大学">
    		<!-- 由于兼容性问题，Vue3中推荐使用v-slot来指定插槽 -->
    		<template v-slot:qwe>
    			<span>五邑大学</span>
    		</template>
    		<template v-slot:asd>
    			<span>五邑大学</span>
    		</template>
    	</Demo>
    </template>

    <script>
    	import Demo from './components/Demo'
    	export default {
    		name: 'App',
    		components:{Demo},
    		setup(){
    			// 自定义事件
    			function showHelloMsg(value){
    				console.log(`你好啊，你触发了hello事件，我收到的参数是:${value}！`)
    			}
    			return {
    				showHelloMsg
    			}
    		}
    	}
    </script>
  • 子组件
    <template>
    	<h1>一个人的信息</h1>
    	<h2>姓名：{{person.name}}</h2>
    	<h2>年龄：{{person.age}}</h2>
    	<button @click="test">测试触发一下Demo组件的Hello事件</button>
    </template>

    <script>
    	export default {
    		name: 'Demo',
    		props:['msg','school'],//这里生命接受父组件传过来的参数props
    		emits:['hello'],//这里声明接收父组件传过来的自定义事件
    		setup(props,context){
    			console.log('---setup---',props)//声明接收props
                //这里的context相当于vuex中的context,里面饱含着一些你可能会用到的方法及属性
    			console.log('---setup---',context)
    			console.log('---setup---',context.attrs) //相当与Vue2中的$attrs
    			console.log('---setup---',context.emit) //触发自定义事件的。
    			console.log('---setup---',context.slots) //插槽
    			//数据
    			let person = reactive({
    				name:'张三',
    				age:18
    			})

    			//方法
    			function test(){
    				context.emit('hello',666)
    			}

    			//返回一个对象（常用）
    			return {
    				person,
    				test
    			}
    		}
    	}
    </script>

结果展示:

image