在我们的组合API的setup函数被调用时，vue会给它传递两个参数，props和context，我们还是从一个小例子来学习
1.props
我们再来写一次之前写过的titleBar标题栏组件，不过这次使用组合API的方式来写
在components文件夹下，新建一个titleBar.vue文件
现在titleBar这个组件有一个props，叫做title，就是它要显示的标题
<template>
<div class="title-bar">
<span class="back-btn"></span>
<div class="title">{{ title }}</div>
</div>
</template>
<script>
export default {
props: { // 定义props的方式和之前一样
title: {
type: String,
default: '',
},
},
setup() {},
}
</script>
<style scoped>
.title-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
}
.back-btn {
position: absolute;
width: 20px;
height: 20px;
border-left: 2px solid #333;
border-top: 2px solid #333;
transform: rotate(-45deg);
top: 8px;
left: 20px;
}
.title {
text-align: center;
}
</style>
现在这个组件只是接受一个props，显示在template中，
在App.vue中使用这个组件
<template>
<div>
<titleBar title="页面标题"></titleBar>
</div>
</template>
<script>
import titleBar from './components/titleBar'
export default {
name: 'App',
components: {
titleBar,
},
}
</script>
使用时和原来的写法一模一样
我们可以使用setup的第一个参数，获得组件的props，在titleBar中增加代码
setup(props) {
console.log(props.title)
},
控制台输出
页面标题
这样使用组合API时，就可以在setup函数中使用父组件传过来的props的值了，而且props也是响应式的
2.context
第二个参数context是一个普通的js对象，
context我们可以理解为它包含这个组件的上下文环境的一些内容，
它里面包含四个值，我们先来学习两个
1）context.emit
context.emit相当于之前使用的$emit，用于向父组件发送自定义事件，我们给titleBar增加一个自定义事件，在点击返回按钮时，发送事件back
<template>
<div class="title-bar">
<span class="back-btn" @click="onBackBtnClick"></span>
<div class="title">{{ title }}</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '',
},
},
emits: ['back'],
setup(props, context) {
const onBackBtnClick = () => {
context.emit('back') // 和$emti用法一样，发送事件
}
return {
onBackBtnClick,
}
},
}
</script>
在App.vue中，处理back事件
<template>
<div>
<titleBar title="页面标题" @back="onTitleBarBack"></titleBar>
</div>
</template>
<script>
import titleBar from './components/titleBar'
export default {
name: 'App',
components: {
titleBar,
},
setup() {
const onTitleBarBack = () => {
console.log('收到了来自titleBar组件的back事件')
}
return {
onTitleBarBack,
}
},
}
</script>
我们点击返回按钮，看到控制台输出
收到了来自titleBar组件的back事件
2)context.attrs
context.attrs和我们之前学过的$attrs一样，可以获取写在子组件标签上的属性
比如，我们在App.vue中使用titleBar是随便给它增加一个属性color
<titleBar title="页面标题" @back="onTitleBarBack" color="#fff"></titleBar>
然后在titleBar中获取color的值
setup(props, context) {
console.log(context.attrs.color)
},
控制台就打印了
#fff
这节课我们就学到这里了
