// app.vue<template><div id="app"><childTest1 :msg="msg"/></div>
</template><script>
import childTest1 from './components/childTest1'export default {name: 'App',data () {return {msg: 'data from parent'}},methods: {},components: {childTest1}
}
</script>

// childTest1.vue
<template><div class="hello">{{msg}}</div>
</template><script>
export default {name: 'childTest1',props: ['msg'],data () {return {msgTest2: null}},methods: {}
}
</script>

// app.vue
<template><div id="app"><childTest1 :msg="msg" ref="childTest1"/></div>
</template><script>
import childTest1 from './components/childTest1'export default {name: 'App',data () {return {msg: 'data from parent'}},created () {// 无效this.$refs.childTest1.setMsgTest2('refs set msg test')},mounted () {this.$refs.childTest1.setMsgTest2('refs set msg test')},methods: {},components: {childTest1}
}
</script>

// childTest1.vue<template><div class="hello"><p>{{msg}}</p><p style="color: #f80000">{{msgTest2}}</p></div>
</template><script>
export default {name: 'childTest1',props: ['msg'],data () {return {msgTest2: null}},methods: {setMsgTest2 (val) {this.msgTest2 = val}}
}
</script>

// App.vue<template><div id="app"><childTest1 :msg="msg" ref="childTest1" @changeMsg="setMsg"/></div>
</template><script>
import childTest1 from './components/childTest1'export default {name: 'App',data () {return {msg: 'data from parent'}},created () {// 无效this.$refs.childTest1.setMsgTest2('refs set msg test')},mounted () {this.$refs.childTest1.setMsgTest2('refs set msg test')},methods: {setMsg (val) {this.msg = val}},components: {childTest1}
}
</script>

// childTest1.vue
<template><div class="hello"><p>{{msg}}</p><p style="color: #f80000">{{msgTest2}}</p><button @click="changeMsg">changeMsg</button></div>
</template><script>
export default {name: 'childTest1',props: ['msg'],data () {return {msgTest2: null}},methods: {setMsgTest2 (val) {this.msgTest2 = val},changeMsg () {this.$emit('changeMsg', 'child change test msg')}}
}
</script>

// app.Vue<template><div id="app">{{parentMsg}}<childTest1 :msg="msg" ref="childTest1" @changeMsg="setMsg"/><ChildTest2 /></div>
</template><script>
import ChildTest1 from './components/ChildTest1'
import ChildTest2 from './components/ChildTest2'
import ChildTestBus from './bus/ChildTest'export default {name: 'App',data () {return {parentMsg: 'parent init msg',msg: 'data from parent'}},created () {ChildTestBus.$on('changeMsg', val => this.setParentMsg(val))// 无效this.$refs.childTest1.setMsgTest2('refs set msg test')},mounted () {this.$refs.childTest1.setMsgTest2('refs set msg test')},destrory () {ChildTestBus.$off('changeMsg')},methods: {setParentMsg (val) {this.parentMsg = val},setMsg (val) {this.msg = val}},components: {ChildTest1,ChildTest2}
}
</script>

// ChildTest1.vue<template><div class="hello"><p>{{msg}}</p><p style="color: #f80000">{{msgTest2}}</p><button @click="changeMsg">changeMsg</button><button @click="changeParentMsg" style="background: #ddd">changeMsgFromTest1</button></div>
</template><script>
import ChildTestBus from '../bus/ChildTest'
export default {name: 'ChildTest1',props: ['msg'],data () {return {msgTest2: null}},methods: {setMsgTest2 (val) {this.msgTest2 = val},changeMsg () {this.$emit('changeMsg', 'child change test msg')},changeParentMsg () {ChildTestBus.$emit('changeMsg', 'change msg from childTest1')}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

// ChildTest2.vue<template><div class="hello"><p style="color: blue">{{msgTest2}}</p><button @click="changeMsg">changeMsgFromTest2</button></div>
</template><script>
import ChildTestBus from '../bus/ChildTest'
export default {name: 'ChildTest2',props: ['msg'],data () {return {msgTest2: 'msg in childTest2'}},methods: {changeMsg () {ChildTestBus.$emit('changeMsg', 'change msg from childTest2')}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

// ChildTest.js

import Vue from 'Vue'
export default new Vue()