子給父?jìng)鳎ㄓ?emit('事件',參數(shù))）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-father></my-father>
</div>
<script src='js/vue.js'></script>
<script>
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:'我是子組件中的數(shù)據(jù)，要傳給父組件'
}
},
methods:{
sendMsg:function(){
// this.$emit('事件',參數(shù))
this.$emit('send',this.msg)
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
QQ拼音截圖未命名.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-father></my-father>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('my-father',{
template:`
<div>
<h1>這是父組件</h1>
<a>子組件傳來(lái)的數(shù)據(jù)為{{jie}}</a>
<my-child @app='jieshou'></my-child>
</div>
`,
data:function(){
return{
jie:''
}
},
methods:{
jieshou:function(ind){
this.jie=ind
}
}
})
Vue.component('my-child',{
template:`
<div>
<h1>這是子組件</h1>
<input type='text' v-model='str'>
<button @click="add">向父組件傳遞</button>
</div>
`,
data:function(){
return{
str:''
}
},
methods:{
add:function(){
this.$emit('app',this.str)
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
QQ拼音截圖未命名.png
