vue中的子传父
2018-09-20 本文已影响0人
greenPLUS
用事件传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="itany">
<my-component></my-component>
</div>
<script src="dist/vue.js"></script>
<script>
Vue.component('my-component',{
template:`
<div>
<h1>{{mess}}</h1>
<my-fiend @send="revMsg"></my-fiend>
</div>
`,
data:function(){
return{
mess:''
}
},
methods:{
revMsg:function(num){
this.mess=num
}
}
}),
Vue.component('my-fiend',{
template:`
<button @click="sendFather">
给父组件
</button>
`,
data:function(){
return{
msg:'我是一个粉刷匠'
}
},
methods:{
sendFather:function(){
this.$emit('send',this.msg)
}
}
}),
new Vue({
el:'#itany'
})
</script>
</body>
</html>
