标签：color 应该 strong input line 总结 选项 comm 实现
父组件 -- > 子组件，使用的props属性传递机制。
在父组件调用子组件时，设置属性
2. 在子组件中，需要定义属性
在子组件的定义中，需要使用props选项，来设置可以从父组件中传递过来的属性。
components:{
‘my-header‘:{
template:"#t1",
props:[‘info‘]
}
}
3.在子组件中，直接使用
<template id="t1">
<div>
<h2>这是子组件</h2>
<p>{{info}}</p>
</div>
</template>
要实现子组件到父组件之间的通信 ----- 事件机制
分两步：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}}
标签：color 应该 strong input line 总结 选项 comm 实现
原文地址：http://www.cnblogs.com/jiangzhenxiang/p/6597065.html
