1.父給子傳值 屬性 props:['屬性']
2.子給父傳 用事件傳 $emit
3.非父子 用第三方量
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="itany">
<child></child>
<child2></child2>
</div>
<script src="vue.js"></script>
<script>
var the=new Vue()
Vue.component('child',{
template:`
<div>
<p>這是child1</p>
<button @click="show">傳值</button>
</div>
`,
data:function(){
return{
mess:'hello Vue'
}
},
methods:{
show:function(){
the.$emit('send',this.mess)
}
}
})
Vue.component('child2',{
template:`
<div>
<p>這是child2</p>
<a href="#">{{msg}}</a>
</div>
`,
data:function(){
return{
msg:''
}
},
mounted:function(){
the.$on('send',mess=>{
this.msg=mess;
})
}
})
new Vue({
el:'.itany'
})
</script>
</body>
</html>
12041882-09bee929c8840e80.png
注釋:點擊傳值在子組件中傳入a標簽