一、setup是vue3新出的一个配置项，组件中的所有方法、数据等都可写在setup里面，并且比beforeCreate和created这两个生命周期还要早出现，这就出现一个问题，即里面this打印出来为undefine，找不到了，所以以后别this.xxx了（备注：setup定义的变量和方法都需要用return返回，不然无法在模板中使用）
可以看到控制台打印出来的，如下图
?
二、setup可以接收两个参数(父子组件之间的传值)，props(组件传递的值)和context(上下文对象)，在父组件页面引入HelloWorld页面作为子组件，父组件定义两个变量，xingbie='男'和aihao='学习' ，子组件用setup(props,context)接收打印，在控制台可以看到父组件传到子组件的值
父组件：
子组件：
?
控制台打印：
?三、刚刚讲了父子组件之间的传值，接下来我们来分析三个插槽及，默认插槽、具名插槽、作用域插槽，默认插槽跟具名插槽相对好理解，可理解为挖个坑，把东西埋进去，单个的就理解为默认插槽，要是有两个或者两个以上的坑是不是得命名，不然埋错了咋整，所以就得写上名字，才能把东西埋在对应的坑里，来吧，看代码，子组件slot标签上加个name="demo"，那么父组件是不是也得找对应的name，所以父组件用v-slot:demo关联，(备注：vue3一定要用v-slot，不然就会报错)
父组件：
?
子组件：
?那么作用域插槽是咋回事呢，可以这么理解，例如有一个坑，两个坑，三个坑，那么这些外观坑都长得一样，那是不是得修饰一下，毕竟帽子还有红绿颜色的区分的对吧，我们把东西先埋在坑里，然后外面再进行装饰，在子组件setup方法里面设置一个值，记得返回，挖个坑，我这边名字随便取的eee，再把东西埋进去:games='games'，接下来可以装饰了，父组件用?v-slot:eee='scopeData'找到名字并接收，要是嫌麻烦也可以用ES6中的新语法{games}去接收，在此两个都贴出来
子组件：
?
?父组件：
?
?
四、父子组件之间的传值，在父组件中定义一个变量，在子组件中用props去接收，前面刚提的
?那么子组件怎么传递值给父组件呢，即在子组件中绑定一个点击事件，在click方法中用context.emit('xingqu','唱歌')传递给父组件，父组件绑定xingqu这个方法接收请求(备注：绑定的方法要和子组件传来的方法一样，即父组件中@后面的方法要和子组件中$emit()中的第一个参数一样)
子组件：
?
?
?父组件：
?
?具体代码如下图：
//父组件
<template>
<h1>{{count}}: {{state}}</h1>
<h2>兴趣：{{dream}}</h2>
<HelloWorld xingbie='男' aihao='学习' @xingqu='xingqu'>
<h3>我是默认插槽</h3>
<template v-slot:demo>
<h3>我是具名插槽</h3>
</template>
<!-- {games} ES6结构赋值 -->
<template v-slot:eee='{games}'>
<h3 style="color:red">{{games.typeone}}</h3>
<h3 style="color:green">{{games.typetwo}}</h3>
</template>
<!-- <template v-slot:eee='scopeData'>
<h3 style="color:red">{{scopeData.games.typeone}}</h3>
<h3 style="color:green">{{scopeData.games.typetwo}}</h3>
</template> -->
</HelloWorld>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name:'App',
components:{
HelloWorld
},
setup(){
const count = '姓名'
const state = '张三'
let dream = '跳舞'
function xingqu(value){
alert('我的兴趣是：' + value)
}
return{
count,
state,
dream,
xingqu
}
}
}
</script>
//子组件
<template>
<h2>性别：{{ xingbie }}</h2>
<h2>爱好：{{ aihao }}</h2>
<slot></slot>
<slot name="demo"></slot>
<slot :games='games' name="eee"></slot>
<button @click="click">点击实现</button>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
xingbie: String,
aihao: String
},
emits:['xingqu'],
setup(props,context){
console.log('props',props)
console.log('context',context.attrs)
let games = {
typeone:'我是作用域插槽1',
typetwo:'我是作用域插槽2'
}
function click(){
context.emit('xingqu','唱歌')
}
return{
click,
games
}
}
}
</script>