1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之父组件向子组件传值

Vue教程之父组件向子组件传值

实例演示

父组件

子组件

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样是为了防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

父组件传递给子组件的值,是存在与父组件的 data 中的,也就是说,父组件会将 data 中的值同时传递给多个子组件,那么多个子组件则是共享了父组件 data 中的值,因此如果子组件可以直接修改父组件传递过来的值,那么则会造成其他子组件的值发生变化,这样是不被允许的,因此 vue 使用单向数据流的方式来进行父向子传值,避免发生此种问题。

每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告,例如:

子组件

Vue教程之父组件向子组件传值

因为单向数据流的限制,我们虽然无法直接修改父组件传递到子组件的值,但是我们是可以通过间接的方式修改的,我们将父组件传递过来的值,重新赋值到子组件中的 data 里的一个变量即可实现数据的修改,例如:

还有一个需要注意的地方,就是如果父组件向子组件传递的一个对象数据,也就是引用传递的话,直接在子组件修改对象数据内的元素数据是没有问题,但是如果直接修改父组件传递给子组件的引用值则会触发警告,例如:

父组件:

子组件:

直接修改引用值的情况,则触发警告,如下:

标签
这篇文章对您有用吗?

我们要如何帮助您?

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注