父组件通过props、v-bind、template、el、data给子组件下发数据,
<div id="abc" >
<gfl v-for="item in items" v-bind:g="item"></gfl>
</div>
<script type="text/javascript">
Vue.component(
"gfl",
{
props:['g'],
template:'<h1>{{g}}</h1>'
}
);
let vm= new Vue({
el:"#abc",
data:{
items:["一号","二号","三号"]
}
});
</script>
子组件通过事件给父组件发送信息。
每个Vue实例都实现了事件接口:
使用$on(evntName)监听事件;
使用$emit(eventName,optionalPayload)触发事件。
另外,父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。