实现Vue父子组件的传值,并使用watch侦听值的变化

  • A+
所属分类:百科

作者「漫步」封面「来自:Pexels」
使用Vue框架时,我们经常会开发一些组件,这就涉及到父子组件之间的通信;下面写一下父子组件如何传值,以及使用watch监听值的变化。
父传子子组件 ChildList需要新建一个vue页面作为子组件,在子组件中设置props参数,名称为data,用来接收父组件传递的值,并显示在页面中。
子组件代码父组件父组件需要通过import引入子组件,并在components中注册子组件,然后在父组件中动态的给data赋值。

<child-list :data="value" />以上代码中的data要与子组件中props里的名称相对应。
父组件代码其中,父组件给子组件传递的value值双向绑定在输入框中,这样就能实现,改变父组件输入框中的值,子组件接收的值也会动态的改变。
注意:该方法属于单向数据流,父组件中值的更新会向下流动到子组件,但是反过来则不行,这时需要用到$emit方法来实现子传父。
$emit的参数名称严格区分大小写,建议使用Kebab-case写法。
子传父this.$emit(eventName, value)$emit方法接收两个参数,eventName是事件名称,父组件需要用该名称接收参数,value是需要传递的值。
下面在子组件中使用$emit方法向父组件传值
子组件代码
然后在父组件中使用对应的方法@send-value接收值,方法名称要与子组件中定义的名称的相对应,绑定getSonValue事件,getSonValue中的value值就是接收的值。
接收到值后,该方法将把该值渲染到页面上
watch侦听器目前已经实现子传父、父传子,接下来我们讲一下$watch()侦听器$watch()可以用来监听值的改变,通常用来监听data和props里面的值,例如下面代码,就可以监听data和sonValue。现在我们实现对props里的data参数进行侦听
$watch()是一个对象,里面可以写键值对,键就是要监听的表达式,值可以是函数或者一个对象。
比如,上面代码watch中的data就是要监听的表达式,冒号后面是值是一个函数,这样我们就可以实现监听props中data数据的变化。
默认情况下,$watch()只有在监听的值发生改变时,才会触发函数,这样就会导致$watch()第一次监听不到值的改变,不会触发函数。
想要实现:该函数在侦听开始之后被立即调用,就需要用到immediate: true 参数,相应写法上也有改变,冒号后面需要写成对象。这样第一次传值,$watch()就能监听值的变化
还有一点,在$watch()侦听一个对象时,如果其对象嵌套的很深,就有可能侦听不到数据的改变。
比如,父组件给子组件传递的是一个对象,改变其中name的值,$watch()就侦听不到。

value:{student:{name: ''}}
这时需要用到deep: true参数,不论其被嵌套多深,都可以侦听到其值的变化。希望本文可以帮助到大家,有什么问题可以在后台留言。
点击下方链接,关注我的公众号

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: