Vue-- non Sons components by value (Bus / Bus / publish subscribe model / observer mode)

<! DOCTYPE HTML > 
< HTML > 

    < head > 
        < Meta charset = "UTF-. 8" > 
        < title > non Sons pass component value (Bus / Bus / publish subscribe model / observer pattern) </ title > 
        < Script the src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ Script > 
    </ head > 

    < body > 
        < div ID = "the root" > 
            < Child Content = "Dell" > </child>
            <child content="lee"></child>
        </div>
        <script type="text/javascript">
            Vue.prototype.bus = new Vue()

            Vue.component('child', {
                props: {
                    content: String
                },
                data() {
                    return {
                        selfContent: this.content
                    }
                },
                template: '<div @click="handleClick">{{selfContent}}</div>',
                methods: {
                    handleClick() {
                        this.bus.$emit('change', this.selfContent)
                    }
                },
                mounted() {
                    var _this = this
                    this.bus.$on('change', (msg) => {
                        _this.selfContent = msg
                    })
                }
            })
            var vm = new Vue({
                el: '#root'
            })
        </script>
    </body>

</html>