<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一个组件向另一个组件传递数据</h1>
<div id="wrap">
<menu-item></menu-item>
<menu-list></menu-list>
</div>
<template id="menu-list">
<div>
<h1>我是menu-list组件</h1>
<button @click="handle">我要把数据传递给我的兄弟组件</button>
</div>
</template>
<template id="menu-item">
<div>
<h1>我是menu-item组件</h1>
</div>
</template>
<script src="./js/vue.js"></script>
<script>
var bus=new Vue()
Vue.component("menu-list",{
template:"#menu-list",
data(){
return{
num:20
}
},
methods:{
handle(){
bus.$emit("send",this.num)
}
}
})
Vue.component("menu-item",{
template:"#menu-item",
data(){
return{
}
},
mounted(){
bus.$on("send",(val)=>{
console.log(val)
})
},
methods:{
}
})
var vm=new Vue({
el:"#wrap",
data(){
return{
}
},
methods: {
}
})
</script>
</body>
</html>
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
