Vue学习(4)-父子组件数据传递

在之前已经学习过如何创建组件和引入组件。这次来学习一下怎么在父子组件之间传递数据,这在实际开发过程中会经常涉及到。
值得注意的是,这里只讨论父子组件之间的数据传递,而两个子组件之间的数据传递可通过父组件做中转,间接进行。

prop

通过在子组件中设置prop,可接收来自父组件的数据。
子组件代码如下:




父组件:




这是同时prop进行静态传参,我们可以结合v-bind进行动态传参。子组件代码不变,我们来看一下父组件代码:




如果使用静态传参,那么传过去的值全都是字符串类型,如果要传递其他类型,请使用v-bind进行动态传参,比如我们要传递数字,父组件代码:


...

大家可以对比一下结果。

$emit

通过触发监听$emit方法我们可以实现子组件使用父组件的方法。
子组件代码




父组件




ref

通过ref我们可以将子组件数据传递给父组件。
子组件不需要做任何改变,只需放置一些数据和方法:




在父组件中,给子组件标签添加ref标识,即可在父组件中访问子组件数据。使用this.$refs.标识符名字即可定位到子组件。




.sync

.sync 修饰符作为一个编译时的语法糖存在,在使用时它会被扩展为一个自动更新父组件属性的 v-on 监听器。




...
//当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:
this.$emit('update:foo', newValue)

看一下案例:
子组件




父组件:




点击按钮,可以发现两个数字都发生改变,如果不加.sync修饰符,会发现只有子组件中的数据num 发生改变,而来自父组件的数字number不会改变。

你可能感兴趣的:(Vue学习(4)-父子组件数据传递)