vue3.0setup中props、provide/inject

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