vue3.0梳理之props

vue2.0的props不做赘述，3.0梳理

做个简单举例，在3.0中，props有两个更好用的名词
-父组件中

<script>
import assembly1 from './assembly1.vue'
import { reactive, provide } from 'vue'
   components: { assembly1 },
   setup () {
   const dataObj= reactive({
       list: [
         'cont1',
         'cont2',
      ]
   }
   provide('data', dataObj.list)
<script>

reactive是Vue3中提供实现响应式数据的方法,与2.0的defineProperty的区别就是3.0使用es6的Proxy来实现，说到这里，明天分析一下vue的响应式数据以及区别

provide 和 inject 对有父子穿透传值能力
父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这个数据，可以忽视层级

• 子组件中（/assembly1.vue）

<script>
import assembly2 from './assembly2.vue'
export default {
  components: {
    assembly2
  }
}
</script>

• 孙子组件 （/assembly2.vue）

<script>
import { inject } from 'vue'
export default {
  setup () {
    const list = inject('dataObj')
    const parentClick = (e) => {
      console.log('孙子组件内函数的触发执行' + dataObj.list)
    }
    return {
      list,
      parentClick
    }
  }
}
</script>

孙子组件中的使用，就证明了子组件及孙子组件的传值都可以正常接收

需要注意的是，provide 传值是不可以传实例或者计算得出属性：

错误示例：
provide: {
    todoLength: this.todos.length
},
正确示例：
provide() {
    return {
      todoLength: this.todos.length
    }
}
//provide作为返回对象的函数来处理
//这点有点像组件的data,也要做函数返回处理

明天分析梳理一下响应式数据及区别