子组件--父组件 传值 在子组件标签上绑定自定义事件, 子组件内部通过$emit 给该事件推送数据, 父组件内部通过函数参数接收
<div id="out">
<h2>子组件 --父组件</h2>
<v-parent></v-parent>
</div>
<template id='parent'>
<div>
<h2>父组件</h2>
<p>接收子组件数据:---{{info}}</p>
<hr >
<v-child @toparent='tap'></v-child>
</div>
</template>
<template id='child'>
<div>
<h2>子组件</h2>
<p>{{title}}</p>
<button type="button" @click='send()'>发送给父组件</button>
</div>
</template>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#out',
data: {},
components: {
'v-parent': {
template: "#parent",
data() {
return {
info:''
}
},
methods:{
tap(msg){
console.log(msg)
this.info=msg
}
},
components: {
'v-child': {
template: "#child",
data() {
return {
title:'this is child info'
}
},
methods:{
send(){
this.$emit('toparent',this.title)
}
}
},
}
},
},
})
// 原生中 events - EventEmitter(类) -- on emit (事件的推送和接收)
</script>