Vue:组件数据传递

By
写代码

Vue中的组件类似于angular中的指令(directive),除了基本的使用方式和效果外,其中的设计思路也能看出一些共同点:比如显示方法,又比如Vue中的Slot(插槽)和Angular的ng-tranclude,显然在Angular的基础上,Vue设计者希望有更直接,更简单的用户体验。以下仅介绍Vue的组件数据传递。

使用组件,目的一般就是提高代码复用率,增强模块化。虽然仅仅把header/footer提取出来,做成一个模板这样的使用情形还是很多,但是也有很多情形下,要使用到数据传递,对此,Vue主要提供了两种方式,prop和作用域插槽。

首先要说明,不同于Vue全局的数据传递,组件实例的数据作用域是孤立的,这里的孤立并不仅仅指在组件内独立,而且是指上下层之间的数据隔离,即不能在子组件的模板(template)内直接引用父组件的数据。如果要把数据从父组件传递到子组件,可以使用props属性。这是父组件用来传递数据的一个自定义属性。子组件需要显式地用props选项声明 “prop”,即用props:['msg','attr']这种格式。

使用属性(prop)传递数据

静态prop

静态属性的使用方法最简单,可以从它看出来props的使用方法,如下:

模板定义

组件使用

在父模板中,用message显示的传递了一个静态字符串“hello!”进去,通过props声明之后,即可在子组件中使用message这个变量。

静态属性很简单,在实际使用中,如果不想定义过多的子组件,或者子组件间的差异比较小,可以用这个方法显式地区分不同显示内容,如content-type="A/B/C"。注意一点:如模板中使用content-type这样的分隔符命名方式,默认在使用vue的js中也可以使用驼峰命名转换而来的变量格式contentType

动态prop

类似于用v-bind可以绑定HTML特性到一个表达式,也可以用v-bind将父组件的数据动态绑定到props所声明的值中。这样,每当父组件的数据变化时,该变化也会传导给子组件,该变化是单向的,不会反向传递(单向数据流):

其中parentMsg为父组件的数据,这里不能使用子组件的属性(父组件模版不应该知道子组件的状态)。

单向数据流

当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部手动改变prop。

作用域插槽传递数据

slot中,也是可以传递数据的,需要使用到作用域插槽(2.1.0新增),并需要使用有属性scopetemplate元素,来标明它是作用域插槽模版。scope命名一个临时变量,接收从子组件传递的prop对象:

组件模版

父组件模版

渲染结果

Comments: 2

  1. 再支持一个,还是看不懂,呵呵。

    01月10日
  2. 搞开发太辛苦了,这个刚学好那个又来,各种坑

    01月16日

发表评论

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

*

:razz: