父子组件之间传递数据的方法

一.从父组件向子组件传递数据是最主要的方式，可以通过组件的props（属性）和solt(插槽)来实现。

1.属性

app.vue通过props向greeting组件传递 “to” 属性的值。

props:['to'],

Vue.js还允许使用明确的方式定义属性，即通过一个对象而不是一个数组来定义一个组件的各种属性。例如：

1 props:{
2     // 基础的类型检查 
3     age:Number, 
4
5     // 多个可能的类型 
6     luckyNumber:[String，Number]， 
7
8     // 必填的字符串 
9     name: { 
10    type:String, 
11    required: true 
12   }， 
13
14    // 带有默认值的数字 
15    score:{ 
16    type: Number, 
17    default:100 
18   }
19 }

2.插槽

向组件传递另一个组件的开闭标记之间的内容。插槽不但可以传入文本，也可以传入HTML结构。

(1)在public/index.html中引入相应的CSS样式文件，代码如下：

<link rel="stylesheet" href="font-awesome.min.css">

（2）把字体文件夹复制到strc/assets文件夹下

<i class="fa  fa-图表名"></i>

在app.vue中修改greeting组件的内容：

1  <greeting v-bind:to="item.name">
2    <i class="fa fa-heart-o"></i>
3  </greeting>

二.从子组件向父组件传递数据

在app.vue中为data增加一个与list并列的records属性，它的值是一个空的数组

1   data() {
2      return {
3       list: [ 
4         {avatar:require('./assets/jj.png'), name: 'jj'}, 
5         ……省略…… 
6       ]， 
7       records:[] 
8      } 
9    }，

然后，在template中对greeting组件的click事件绑定onClick方法

1 <greeting v-bind:to="item.name" @click="onClick" >
2   <i class="fa fa-heart-o"></i>
3 </greeting>

在methods中增加onClick()方法，作用是将被单击时的时间记录到records数组中

1   methods:{
2     onClick(name,count){
3      this.records.push(name, count, time: new Date().toLocaleTimeString()}); 
4      }
5    }

最后，在template中使用v-for循环渲染records数组。

1   <p v-for="(item, index) in records" v-bind:key="index">
2     {{item.time}} - {{item.name}} - {{item.count}}票 
3   </p >

注意：

app.vue和greeting.vue是两个组件，它们各自都有一个onClick()方法，但是虽然名称相同，但这两个方法的作用却完全不同。

组件的数据模型，即data属性，必须以函数方式返回，即使在根组件app.vue中也是如此。