var bus = new Vue();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
</head>
<body>
<div id="box">
<weixinauthor></weixinauthor>
<weixinuser></weixinuser>
</div>
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var bus = new Vue();
Vue.component("weixinauthor", {
template: `<div style="background:blue">
我是一个微信公众号作者
<input type="text" ref="mytext"/>
<button @click="handleClick()">发布</button>
</div>`,
methods: {
handleClick() {
bus.$emit("weixinmessage", this.$refs.mytext.value)
}
}
})
Vue.component("weixinuser", {
template: `<div style="background:yellow">
我是一个微信用户
</div>`,
mounted() {
bus.$on("weixinmessage", (data) => {
console.log("收到推送了", data)
})
console.log("生命周期函数-当前组件的dom创建完成之后就会调用")
}
})
new Vue({
el: "#box"
})
</script>
</body>
</html>
