1.props在setup中的使用
由于setup內(nèi)部是不能用this的天通，你的props并不能在setup內(nèi)部方法里用this.xx去拿到，setup接受兩個(gè)參數(shù)props和context
export default {
name: 'Test',
props: ['name', 'age'],
// setup(props, context) { // 有的時(shí)候會(huì)這樣寫熄驼，你可能只用得到emit
setup(props,{attrs, slots, emit}) // 如果你都用得到你可以這樣解構(gòu)的寫出來像寒，這個(gè)不是響應(yīng)式的，所以可解構(gòu)
// 錯(cuò)誤寫法 const {name} = props 這里我理解你肯定想直接就使用name瓜贾，age等
// 這個(gè)props是一個(gè)響應(yīng)式的Proxy對象诺祸，不可以解構(gòu)，解構(gòu)后悔失去響應(yīng)祭芦，如果要用解構(gòu)的方式筷笨，要用toRefs
let { name, age } = toRefs(props)
// 現(xiàn)在是不是感覺可以直接就用操作name和age了，天真龟劲，轉(zhuǎn)成ref了胃夏，所有的訪問值都要xx.value
console.log(name.value,age.value)
// 所以倒回去，是不是覺得還不如直接用props.name直接訪問代理對象的值要好點(diǎn)
console.log(props.name, props.age)
// context
// 看到這個(gè)context的參數(shù)你應(yīng)該知其意了撒
// attrs: 相當(dāng)于vue2.0的$attrs,意思就是傳進(jìn)來的屬性值除了props接受的那部分
// slots: 就是插槽昌跌，你要獲取插槽的什么值的話可以用這個(gè)
// 插槽這里解釋下仰禀，可能有部分人不知道咋拿值，順便說下蚕愤，這里vue3.0的所有響應(yīng)式數(shù)據(jù)都是Proxy對象答恶，所以你取值的時(shí)候都是proxy.xxx獲取
slots.default(args => {
console.log('這里就是你在vue2.0里看到的所有slot的數(shù)組饺蚊，就可以取你要哪個(gè)插槽的值了', args)
})
// emit: 這個(gè)是vue2.0 的$emit
emit('方法名', '參數(shù)') // vue2.0 this.$emit('方法名', '參數(shù)')
...
}
}
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是為了讓數(shù)據(jù)變成響應(yīng)式的污呼，父組件變化，子組件數(shù)據(jù)跟著變
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
}
}
}
