1.props在setup中的使用
由于setup内部是不能用this的，你的props并不能在setup内部方法里用this.xx去拿到，setup接受两个参数props和context
export default {
name: 'Test',
props: ['name', 'age'],
// setup(props, context) { // 有的时候会这样写，你可能只用得到emit
setup(props,{attrs, slots, emit}) // 如果你都用得到你可以这样解构的写出来，这个不是响应式的，所以可解构
// 错误写法 const {name} = props 这里我理解你肯定想直接就使用name，age等
// 这个props是一个响应式的Proxy对象，不可以解构，解构后悔失去响应，如果要用解构的方式，要用toRefs
let { name, age } = toRefs(props)
// 现在是不是感觉可以直接就用操作name和age了，天真，转成ref了，所有的访问值都要xx.value
console.log(name.value,age.value)
// 所以倒回去，是不是觉得还不如直接用props.name直接访问代理对象的值要好点
console.log(props.name, props.age)
// context
// 看到这个context的参数你应该知其意了撒
// attrs: 相当于vue2.0的$attrs,意思就是传进来的属性值除了props接受的那部分
// slots: 就是插槽，你要获取插槽的什么值的话可以用这个
// 插槽这里解释下，可能有部分人不知道咋拿值，顺便说下，这里vue3.0的所有响应式数据都是Proxy对象，所以你取值的时候都是proxy.xxx获取
slots.default(args => {
console.log('这里就是你在vue2.0里看到的所有slot的数组，就可以取你要哪个插槽的值了', args)
})
// emit: 这个是vue2.0 的$emit
emit('方法名', '参数') // vue2.0 this.$emit('方法名', '参数')
...
}
}
2.provide和inject
vue2.0的用法可以去看下vue2.0的文档，vue3.0中可以把provide和inject放在setup中使用，还挺方便的
// 老父亲组件
import { provide, ref, reactive } from 'vue'
export default {
name: 'Test',
setup() {
// 用法: provide(key, value) 用下面的ref和reactive是为了让数据变成响应式的，父组件变化，子组件数据跟着变
const name = ref('小哥哥')
const obj = reactive({
name: '土狗',
age: '3岁'
})
provide('name', name)
provide('animal', obj)
}
}
// 乖儿孙组件
import { inject } from 'vue'
export default {
name: 'Child,
setup() {
// 用法: inject(key)
const name = inject('name')
const animal = inject('animal')
return {
name,
animal
}
}
}
