vue组件-#构成组件-父组件向子组件传递数据

组件对于vue来说非常重要，学习学习了基础vue后，再回过头来把组件弄透！

一、概念

　　组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。

　　它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。

　　在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。

　　　　　　　　　　父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

　　看看它们是怎么工作的。

　　                                              

二、使用props传递数据

        组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。

　　　子组件要显式地用 props 选项声明它期待获得的数据：

　　　　　js:　　　　

　　　　　　Vue.component( 'child', {

 

　　　　　　　　/ 声明 props

 

　　　　　　　　props: [ 'message'],

 

　　　　　　　　// 就像 data 一样，prop 可以用在模板内

 

　　　　　　　　// 同样也可以在 vm 实例中像 “this.message” 这样使用

 

　　　　　　　　template: '<span>{{ message }}</span>'

 

　　　　　　})

 

　　然后我们可以这样向它传入一个普通字符串：

　　　　html:

 

　　　　 <child message="hello!"></child>