vue3学习 setup，props，context

setup 函数1、执行时机在 beforeCreate 和 created这两个钩子函数之前，是最早执行的，在程序运行中，setup函数只执行一次2、在setup中没有this , 打印返回undefinedvue3里的生命周期：① 可以和vue2里一样选项式写法，和setup平级，beforeCreate/ created/ beforeMount/ mounted / beforeUpdat

某绿

8206人浏览 · 2021-07-28 11:08:49

某绿 · 2021-07-28 11:08:49 发布

setup 函数

1、执行时机在 `beforeCreate` 和 `created `这两个钩子函数之前，是最早执行的，在程序运行中，setup函数只执行一次
2、在setup中没有this , 打印返回`undefined`

vue3里的生命周期：
① 可以和vue2里一样选项式写法，和setup平级，
beforeCreate/ created/ beforeMount/ mounted / beforeUpdate / updated / beforeUnmount / unmounted
② 可以在setup里调用生命周期。调用的时候，在原来的api上加上on换成驼峰命名，如：beforeMount -> onBeforeMount，而且在setup里调用的生命周期会比你用选项式写法执行的时机会快一点。

注：在vue2中组件卸载的api为 destroyed 在vue3中组件卸载api换成了 unmounted

3、setup里接收的参数 props, context
props：和vue2中组件中props意思一样，都是接收传过来的参数必须对props传过来的参数先进行声明，如果没声明，传过来的参数将出现在attrs中

props

// 声明时props和setup同级,可以通过以下方式对父组件传递的参数在props中声明
props:{
    msg:String,
    name:String
  },

context

context ：上下文，包括 attrs 、 emit 、slots。
① attrs :在此部分，接收在父组件传递过来的，并且没有在props中声明的参数参数。

② emit：子组件对父组件发送事件
在vue2中，子对父发送事件采用this.$emit对父组件发送事件，在vue3中子组件对父组件发送事件采用context.emit发送事件

// 在子组件中
<button @click="postMsg">
    我是子组件，我要向父组件发送事件了
</button>

// js 部分
setup(props,context){
	function postMsg(){
      	console.log('我发送了')
      	context.emit('pMSg',{msg:'我是子组件发送的信息'})
    }
    return {postMsg}
}

父组件中进行接收

<test @pMSg="func" />

// js 部分
setup(props,context){
    const func = (e)=>{
      console.log('子组件发送过来的信息',e)
    }
    return { func } 
 }

点击按键
在这里插入图片描述

slots

③ slots：和vue2中的插槽使用类似

插槽使用 :

// 在子组件中
// 具名插槽，在name中给插槽命名名字
<slot name='title'></slot>
<slot name="content"></slot> 
// 默认插槽
<slot></slot>

此时在子组件中的setup里打印出context.slots ，里面都显示出了所有你在子组件里写的插槽。
在这里插入图片描述

// 在父组件中的使用
// v-slot:[name] 可以通过这种方式动态的写插槽名
<template v-slot:[name]>我是插槽里的内容</template>
<template v-slot:title> 我是插槽里的标题 </template>
<template v-slot>asdasd</template>