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
    }
  }
}