Vue不同组件之间相互传值
使用一个空Vue实例来进行传值，通过$emit,$on即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="utf-8">
<script src="./main/vue.js"></script>
</head>
<body>
<div id="demo">
<!-- test code -->
<custom-a></custom-a>
<custom-b></custom-b>
<!-- test code -->
</div>
</body>
<script type="text/javascript">
let bus = new Vue();
Vue.component("custom-a", {
template: "<button @click="transValue">Click</button>",
methods: {
transValue: () => bus.$emit("transValue", "hello from a")
}
});
Vue.component("custom-b", {
template: "<input :value="msg">",
data: function() {
return {
msg: ""
}
},
mounted() {
bus.$on("transValue", msg => this.msg = msg)
}
});
new Vue({
el: "#demo"
});
</script>
</html>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： vue组件之间互相传值：父传子，子传父
- 下一篇： Vue2.0子同级组件之间数据交互
