$emit：传数据
具体看代码，自定义事件需要绑定到子组件身上，自定义组件里面的hide是接收数据的，通过参数的形式传入，$emit的声明也是需要在子组件方法里面的。
<body>
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
<h3>父组件 ---</h3>
<p>父亲的小金库：{{xiaojinku}}</p>
<hr >
<!-- 使用自定义事件的形式将hide这个方法绑定到子组件身上 -->
<!-- 事件的名字自己随意定义 -->
<Son @hidee="hide"></Son>
</div>
</template>
<template id="son">
<div>
<h4>子组件 ---</h4>
<button type="button" @click="give">给红包</button>
</div>
</template>
</body>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//子父组件通信
//模拟一个场景，父亲节，给父亲一个礼物，【红包】
//你给红包 是你发出的
//父亲 接收红包，然后藏到私房钱小金库
Vue.component('Father',{
template:'#father',
data(){
return{
xiaojinku:500 //需要一个数据来接收红包
}
},
methods:{
hide(value){ //藏起来
//value表示子组件发过来的红包
this.xiaojinku += value
}
}
})
Vue.component('Son',{
template:'#son',
data(){
return{
redbag:8888
}
},
methods:{
give(){
//给红包
this.$emit('hidee',this.redbag) //作为参数传进去给
}
}
})
new Vue({
el:'#app'
})
</script>
7611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
