<template><div><h1>app</h1><one></one><two></two></div></template><script>import one from "./one.vue"import two from "./two.vue"export default {
components:{
one,
two
}}</script><style></style>
<template><div style="border:1px solid #ccc">
A组件:
<span>{{elementValue}}</span><input type="text" v-model="elementValue"><input type="button" value="点击触发" @click="elementByValue"></div></template><script>
// 引入公共的bug,来做为中间传达的工具
import Bus from './bus.js'export default {
data (){return{
elementValue: 4
}},
methods: {
elementByValue: function(){
Bus.$emit('val', this.elementValue)}}}</script>
<template><div style="border:1px solid #ccc">
B组件:
<input type="button" value="点击触发" @click="getData"><span>{{name}}</span></div></template><script>import Bus from './bus.js'export default {
data (){return{
name: 0
}},
mounted: function(){
var vm = this
// 用$on事件来接收参数
Bus.$on('val', (data)=>{
console.log(data)
vm.name = data
})},
methods: {
getData: function(){
this.name++
}}}</script>