组件传值
兄弟传值
1.创建一个vue实例
2.写组件
3.创建一个事件中心 var hub = new Vue();
4.传递数据方，触发兄弟组件的事件，通过一个事件触发hub.$emit(方法名，传递的数据)
5.接收方通过mounted(){}钩子中 触发hub.$on()方法
<!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>兄弟之间的传值2</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<test-tom></test-tom>
<jerry-tom></jerry-tom>
</div>
<script>
// 3.创建一个事件中心
var hub = new Vue();
// 2.写两个组件
Vue.component("test-tom", {
data: function () {
return {
num: 0,
};
},
// 模板
template: `<div>
<div>Tom:{{num}}</div>
<button @click="handle">按钮</button>
</div>`,
// 4.写一个方法 触发兄弟组件的事件
methods: {
handle: function () {
// 兄弟组件的事件名
hub.$emit("jerry-event", 2);
},
},
mounted: function () {
hub.$on("tom-event", (val) => {
this.num += val;
});
},
});
Vue.component("jerry-tom", {
data: function () {
return {
num: 0,
};
},
// 模板
template: `<div>
<div>jerry:{{num}}</div>
<button @click="handle">按钮</button>
</div>`,
methods: {
handle() {
hub.$emit("tom-event", 3);
},
},
// 5.接收方通过mounted(){}钩子中 触发hub.$on()方法
mounted() {
hub.$on("jerry-event", (val) => {
this.num += val;
});
},
});
//1.创建一个vue实例
var vm = new Vue({
el: "#app",
data: {},
});
</script>
</body>
</html>