[vue3新特性] 7.组合api——8.setup函数的两个参数

在我们的组合API的setup函数被调用时，vue会给它传递两个参数，props和context，我们还是从一个小例子来学习

1.props

我们再来写一次之前写过的titleBar标题栏组件，不过这次使用组合API的方式来写
在components文件夹下，新建一个titleBar.vue文件
现在titleBar这个组件有一个props，叫做title，就是它要显示的标题

现在这个组件只是接受一个props，显示在template中，
在App.vue中使用这个组件

使用时和原来的写法一模一样

我们可以使用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

在App.vue中，处理back事件

我们点击返回按钮，看到控制台输出

收到了来自titleBar组件的back事件

2)context.attrs

context.attrs和我们之前学过的$attrs一样，可以获取写在子组件标签上的属性
比如，我们在App.vue中使用titleBar是随便给它增加一个属性color

然后在titleBar中获取color的值

  setup(props, context) {
    console.log(context.attrs.color)
  },

控制台就打印了

#fff

这节课我们就学到这里了