在我们的组合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

这节课我们就学到这里了