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的使用方法,如下:模板定义Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data
...
继续阅读
(15)