子传父
2018-09-24 本文已影响0人
yangmengjiao
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-father></my-father>
</div>
<script src="../vue(01)/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('my-father',{
template:
`
<div>
<my-child @send='revMsg'></my-child>
<a href="#">{{mess}}</a>
</div>
`
,
data:function(){
return{
mess:''
}
},
methods:{
revMsg:function(txt){
this.mess=txt
}
}
})
Vue.component('my-child',{
template:
`
<button @click='sendMsg'>按钮</button>
`
,
data:function(){
return{
msg:'我是子组件中的数据，要传给父组件'
}
},
methods:{
sendMsg:function(){
// this.$emit('事件',参数)
this.$emit('send',this.msg)
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
