前言：

     对vue3.0的学习以及对技术更新升级内容的整理与使用，这里分析下他的props父子传值的改动。

vue官方入口

目录

一、vue2.0中props的用法

1、父组件中 a.vue中

2、子组件中 b.vue中

3、孙子组件中 c.vue中

二、vue3.0中props的用法

1、父组件中 a.vue中

2、子组件中 b.vue中

3、孙子组件中 c.vue中

三、vue.2.0的props和vue3.0的props的对比

个人理解：

           解决了我们嵌套层级比较多的时候，我们必须注册才能使用最外层数据的问

官方解释：

#处理响应性

四、 provide/inject

五、官方props的解释

六、官方对props改动的介绍

 

---

一、vue2.0中props的用法

1、父组件中 a.vue中

template:
        
<b :list='mmm.list'><b>

import b from './b.vue'

components: {
    b
  },


data() {
    return {

        mmm: {
            list:[111,222,333]
        }
  }
}

2、子组件中 b.vue中

template:
        
<c :list='list'><c>

js部分：

import c from './c.vue'

components: {
    c
  },

props:['list']

3、孙子组件中 c.vue中

template:
        
<ul>
    <li v-for='item in list'></li>
</ul>

props:['list']

二、vue3.0中props的用法

1、父组件中 a.vue中

template:
        
<b><b>

import b from './b.vue'
import { reactive, provide } from 'vue'

components: {
    b
  },
 setup () {
     const mmm = reactive({
          list: [
            111,
            222,
            333
          ]
        })
    provide('mmm', mmm.list)
  },

2、子组件中 b.vue中

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

}
</script>

<style lang='' scoped>

</style>

3、孙子组件中 c.vue中

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{item}}</li>
  </ul>
</template>
<script>
import { inject } from 'vue'
export default {
  setup () {
    const list = inject('mmm')
    const parentClick = (e) => {
      alert(1)
    }
    return {
      list,
      parentClick
    }
  }
}
</script>

三、vue.2.0的props和vue3.0的props的对比

个人理解：

           解决了我们嵌套层级比较多的时候，我们必须注册才能使用最外层数据的问

官方解释：

通常，当我们需要将数据从父组件传递到子组件时，我们使用 props。想象一下这样的结构：你有一些深嵌套的组件，而你只需要来自深嵌套子组件中父组件的某些内容。在这种情况下，你仍然需要将 prop 传递到整个组件链中，这可能会很烦人。

对于这种情况，我们可以使用 provide 和 inject 对。父组件可以作为其所有子组件的依赖项提供程序，而不管组件层次结构有多深。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这个数据。

例如，如果我们有这样的层次结构：

Root
└─ TodoList
   ├─ TodoItem
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

 

如果要将 todo-items 的长度直接传递给 TodoListStatistics，我们将把这个属性向下传递到层次结构：TodoList -> TodoListFooter -> TodoListStatistics。通过 provide/inject 方法，我们可以直接执行以下操作：

const app = Vue.createApp({})

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    user: 'John Doe'
  },
  template: `
    <div>
      {{ todos.length }}
      <!-- 模板的其余部分 -->
    </div>
  `
})

app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`) // > 注入 property: John Doe
  }
})

 

但是，如果我们尝试在此处提供一些组件实例 property，则这将不起作用：

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    todoLength: this.todos.length // 将会导致错误 'Cannot read property 'length' of undefined`
  },
  template: `
    ...
  `
})

 

要访问组件实例 property，我们需要将 provide 转换为返回对象的函数

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide() {
    return {
      todoLength: this.todos.length
    }
  },
  template: `
    ...
  `
})

这使我们能够更安全地继续开发该组件，而不必担心可能会更改/删除子组件所依赖的某些内容。这些组件之间的接口仍然是明确定义的，就像 prop 一样。

实际上，你可以将依赖注入看作是“long range props”，除了：

• 父组件不需要知道哪些子组件使用它提供的 property
• 子组件不需要知道 inject property 来自哪里

#处理响应性

在上面的例子中，如果我们更改了 todos 的列表，这个更改将不会反映在注入的 todoLength property 中。这是因为默认情况下，provide/inject 绑定不是被动绑定。我们可以通过将 ref property 或 reactive 对象传递给 provide 来更改此行为。在我们的例子中，如果我们想对祖先组件中的更改做出反应，我们需要为我们提供的 todoLength 分配一个组合式 API computed property：

app.component('todo-list', {
  // ...
  provide() {
    return {
      todoLength: Vue.computed(() => this.todos.length)
    }
  }
})

app.component('todo-list-statistics', {
  inject: ['todoLength'],
  created() {
    console.log(`Injected property: ${this.todoLength.value}`) // > Injected property: 5
  }
})

在这种情况下，对 todos.length 将正确反映在组件中，其中“todoLength”被注入。在响应式计算和侦听和组合式 API 部分中阅读关于 reactive provide/inject 的更多信息

四、 provide/inject

特点：

• provide() 和 inject() 可以实现嵌套组件之间的数据传递。

• 这两个函数只能在 setup() 函数中使用。

• 父级组件中使用 provide() 函数向下传递数据。

• 子级组件中使用 inject() 获取上层传递过来的数据。

• 不限层级

 

五、官方props的解释

六、官方对props改动的介绍