用$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>
2.父傳子
用props 屬性來傳值
<!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-tit v-bind:tit='title'></my-tit>
<my-fruit v-bind:fruList='list'></my-fruit>
</div>
`,
data:function(){
return{
list:['apple','pear','banana'],
title:'水果列表'
}
}
})
Vue.component('my-tit',{
props:['tit'],
template:`
<h2>{{tit}}</h2>
`
})
Vue.component('my-fruit',{
props:['fruList'],
template:`
<ul>
<li v-for="value in fruList">{{value}}</li>
</ul>
`
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
3.非父子之間傳值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<child></child>
<son></son>
</div>
<script src='js/vue.js'></script>
<script>
var bus=new Vue();
Vue.component('child',{//a
template:`
<div>
<h2>我是child組件</h2>
<button @click='sendMsg'>發(fā)送數(shù)據(jù)</button>
</div>
`,
data:function(){
return{
msg:'我是child組件中的數(shù)據(jù)，要傳給son組件'
}
},
methods:{
sendMsg:function(){//發(fā)送數(shù)據(jù)
bus.$emit('send',this.msg)
}
}
})
Vue.component('son',{//b
template:`
<div>
<h2>我是son組件</h2>
<a>{{mess}}</a>
</div>
`,
data:function(){
return{
mess:''
}
},
mounted:function(){
bus.$on('send',msg=>{
console.log(this);
this.mess=msg
})
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
2018-09-25
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門闷板，熙熙樓的掌柜王于貴愁眉苦臉地迎上來澎灸，“玉大人，你說我怎么就攤上這事遮晚⌒哉眩” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵县遣，是天一觀的道長糜颠。 經(jīng)常有香客問我，道長萧求，這世上最難降的妖魔是什么其兴？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮夸政，結(jié)果婚禮上元旬，老公的妹妹穿的比我還像新娘。我一直安慰自己秒梳，他們只是感情好法绵，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著酪碘，像睡著了一般朋譬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上兴垦，一...
- 文/蒼蘭香墨 我猛地睜開眼常柄，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了搀擂？” 一聲冷哼從身側(cè)響起西潘，我...
- 正文 年R本政府宣布附迷，位于F島的核電站，受9級特大地震影響哎媚，放射性物質(zhì)發(fā)生泄漏喇伯。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一拨与、第九天 我趴在偏房一處隱蔽的房頂上張望稻据。 院中可真熱鬧，春花似錦买喧、人聲如沸捻悯。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽今缚。三九已至，卻和暖如春低淡，著一層夾襖步出監(jiān)牢的瞬間姓言，已是汗流浹背瞬项。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 最近，少女心好像又復(fù)蘇了稠鼻，荒唐無厘頭瑪麗蘇的戲碼依舊能感動冈止。 01 電影和電視劇反復(fù)循環(huán)的情節(jié)憑借理想化的面具鋪陳...
- 無論是在大學(xué)期間狞谱，還是開始從業(yè)至今，我對實務(wù)微技巧的學(xué)習(xí)都有一種如饑似渴的感覺禁漓。大學(xué)教材《個案工作》一書將面談技巧...
