关于Vue父子组件传值之watch运用

大多数父组件往子组件传值的情景都是:

父组件传值—>子组件通过props接收父组件传值—>子组件通过插值表达式{{Value}}去显示值

但是!!总会有不同的情景出现!
当我在使用element组件库时候就遇到了如下情况:


image.png

一个很简单的表单组件,但是它的数据显示是通过model属性绑定的,因而这里我们不能去使用表达式去处理了。一开始我想,那也很简单啊,你不是要绑定值吗,我在data里去写一个form值,然后再给这个form绑定上父组件传来的值不就完事了嘛。看上去是可行的,但是,事实往往不遂人意,这样是行不通的。原因是,data属性只是一个初始值,并不会实现数据绑定的效果,因此我这种妄图通过data实现父子组件值绑定的思路破产了。

下面是正解(通过watch:监听器实现):


image.png

ps:更好的方法可以通过计算属性computed去实现同样的效果,从性能上较优
欢迎大家纠错和讨论。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,016评论 0 25
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,801评论 1 32
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 13,162评论 0 13
  • 首先 vue 组件化的一个框架。既然是组件化。那么一定存在组件和组件之间传值的问题 在讨论组件和组件怎么传值的问题...
    人话博客阅读 4,914评论 0 50
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 8,653评论 0 3