vue给组件传html,Vue 2.0学习笔记：组件数据传递

通过上一节中的学习，咱们了解了在Vue中怎么创建组件和使用组件。在项目中使用组件，目的一般就是提高代码复用率，增强模块化，从而降低开发成本。在文章结尾处，我们提到了Vue中组合组件，就是A组件中包含了B组件。而组件与组件之间的相互使用避免不了数据之间的传递。那么Vue中组件的数据是如何传递的呢？这就是这一节将要了解和学习的内容。

首先要说明，组件数据传递不同于Vue全局的数据传递，组件实例的数据作用域名是孤立的，这里的孤立并不仅仅在组件内独立，而且是指上下层之间的数据隔离，即不能在子组件的模板内直接引用父组件的数据。如果要把数据从父组件传递到子组件，就需要使用props属性。这是父组件用来传递数据的一个自定义属性。也就是说，如果要彻底了解清楚Vue组件的数据传递，就很有必要了解清楚props属性。

组件数据流向

在Vue的官方文档中提到，在Vue中，父子组件的关系总结为：prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。如下图所示：

常把这种数据流称之为单向数据流。prop是单向绑定的：当父组件的属性变化时，将传给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

另外，每次父组件更新时，子组件的所有prop都会更新为最新值。这意味着你不应该在子组件内部改变prop。如果你这么做了，Vue会在控制台给出警告。用一张更细化的图来表示Vue组件系统中父子组件的数据流动：

使用props向子组件传递数据，首先要在子组件中定义子组件能接受的props，然后在父组件中子组件的自定义元素上将数据传递给它。

props的使用

前面提到过了，组件实例的作用域是孤立的。父组件需要通过props把数据传给子组件。要真正了解其中的原委，就很有必要了解清楚props的使用。那么我们从一些简单的示例开始吧。

props基础示例

首先来创建一个子组件child，并且在Vue的实例中定义了data选项。

let parent = new Vue({

el: '#app',

data () {

return {

name: 'w3cplus',

age: 7

}

},

components: {

'child': {

template: '#child',

props: ['myName', 'myAge']

}

}

})

这里直接把Vue实例parent当作组件child的父组件。如果我们想要使用父组件的数据，则必须先在子组件中定义props，即：props:['myName', 'myAge']。

接下来定义child组件的模板：

子组件child数据

• 姓名

  {{ myName }}

• 年龄

  {{ myAge }}