1.父组件到子组件

父组件 -- > 子组件，使用的props属性传递机制。

1. 在父组件调用子组件时，设置属性

Vue.component(‘child‘, {

// 声明 props

props: [‘message‘],

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

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

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

})

设置message属性的值为hello

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

结果为 hello！

　　2. 在子组件中，需要定义属性

在子组件的定义中，需要使用props选项，来设置可以从父组件中传递过来的属性。

components:{　　‘my-header‘:{　　　　template:"#t1",　　　　props:[‘info‘]　　}}
   

3.在子组件中，直接使用

<template id="t1">
        <div>
            <h2>这是子组件</h2>
            <p>{{info}}</p>
        </div>
    </template>

2.子组件到父组件

要实现子组件到父组件之间的通信 ----- 事件机制

分两步：1.在子组件中，需要发射事件，使用$emit实现。2.在父组件中，需要注册事件，使用$on 实现

第一步，在子组件中发射事件

//注册keyup事件<input type="text" placeholder="输入用户名" v-model="username" @keyup="send(username)">

//在子组件中定义send方法components : {
                "my-form" : {
                    template : "#t1",
                    data : function(){
                        return {
                            username : ""
                        }
                    },
                    methods : {
                        send : function(msg){
                            //此时，子组件应该向外发生一个事件
                            this.$emit(‘transfer‘,msg);
                        }
                    }
                }
            }

第二步，在父组件注册事件

<h2>父组件</h2>
<p>来自子组件的输入数据：{{msg}}</p>
<hr>
<my-form @transfer="getUsername"></my-form>

//在父组件中，来定义整个getUsername方法，

methods : {
                getUsername : function(e){
                    // alert(‘ok‘);
                    // console.log(e);
                    this.msg = e;
                }
            },

然后就可以在父组件中使用{{msg}}