一、body部分：
<div id="itany">
<my-father></my-father>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
//父组件
Vue.component('my-father',{
template:`
<div>
<h3>{{mess}}</h3>
<my-child @rec='alt'></my-child>
</div>
`,
data:function(){
return{
mess:''
}
},
methods:{
alt:function(txt){
this.mess=txt
}
}
})
//子组件
Vue.component('my-child',{
template:`
<button @click='add'>点击</button>
`,
data:function(){
return{
msg:'我是子组件，我要向父组件传值'
}
},
methods:{
add:function(){
this.$emit('rec',this.msg)
// this.$emit('自定义事件名',要传输的数据)
}
}
})
new Vue({
el:"#itany"
})
</script>
效果：
子给父传值案例一.png
二、子给父传值练习：
body部分：
<div id="itany">
<my-father></my-father>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
// 父组件
Vue.component('my-father',{
template:`
<div>
<h1>这是父组件</h1>
<p>向父组件传值内容为:{{mess}}</p>
<my-child @send='alt'></my-child>
</div>
`,
data:function(){
return{
mess:''
}
},
methods:{
alt:function(txt){
this.mess=txt
}
}
})
//子组件
Vue.component('my-child',{
template:`
<div>
<h1>这是子组件</h1>
<input type="text" v-model='msg'>
<button @click='add'>向父组件传值</button>
</div>
`,
data:function(){
return{
msg:''
}
},
methods:{
add:function(){
this.$emit('send',this.msg)
}
}
})
new Vue({
el:"#itany",
})
</script>
效果：
子给父传值练习一.png
