setup里面的第一个参数porps 可以获取组件中的 props，也就是父组件向子组件传的值,如果子组件不就收，传过来的值就是non-porps属性，挂在子组件的标签上
setup里面的第二个参数，context 中, 可以解构出 attrs, slots, emit三个参数
attrs, 处理non-props 属性，也就是处理父组向子组件传值，子组件不接收的情况
结构出来的第二个slot是插槽，作用是父组件向子组件传递的html标签结构
结构出来的第三个是emit,父组件向子组件传值是单项数据流，只能用，不能改
如果要改，第一种办法是，在子组件定义一个变量接收父组件的传值，然后改定义这个变量，相当于自己改自己
第二种办法是，通过 emit:("")向父组件发消息，让父组件在内部通过函数的形式 更改父组件的值
代码不在这里演示，前面的文章都有三个参数相关的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// 模板，用了一个子组件,并向里面传值
template: `
<son username= "zhangsan" />
`,
});
// 定义子组件
app.component("son", {
props: ["username"],
template: `
<h1 @click="handleClick">{{username}}</h1>
`,
// setup函数
setup(props, context) {
// 定义子组件里面的事件，写在method的时候，不需要加function,写在setup里面需要加function
// setup里面的第一个参数porps 可以获取组件中的 props，也就是父组件向子组件传的值
// 如果子组件不就收，传过来的值就是non-porps属性，挂在子组件的标签上
function handleClick() {
alert("被点击了");
}
// setup里面的第二个参数，context 中, 可以解构出 attrs, slots, emit
// attrs, 处理non-props 属性，也就是处理父组向子组件传值，子组件不接收的情况
// 结构出来的第二个slot是插槽，作用是父组件向子组件传递的html标签结构
// 结构出来的第三个是emit,父组件向子组件传值是单项数据流，只能用，不能改
// 如果要改，第一种办法是，在子组件定义一个变量接收父组件的传值，然后改定义这个变量，相当于自己改自己
// 第二种办法是，通过 emit:("")向父组件发消息，让父组件在内部通过函数的形式 更改父组件的值
// 返回
return { handleClick };
},
});
const vm = app.mount("#root");
</script>
</html>
