vuejs非父子组件传值

2019-11-11  本文已影响0人  前端丶米店

简单场景下,可以使用一个空的vue实例作为中央事件总线 进行通信

<div id="root">
    <child content="childOne"></child>
    <child content="childTwo"></child>
  </div>

  <script>
    // bus 总线 进行非父子组件的传值

    Vue.prototype.bus = new Vue()

    Vue.component('child', {
        props: ['content'],
        data: function() {
            return {
                myContent: this.content
            }
        },
        template: '<div @click="handleClick">{{myContent}}</div>',
        methods: {
            handleClick: function() {
                this.bus.$emit('change', this.myContent)
            }
        },
        mounted: function() {
            var this_ = this;
            this.bus.$on('change', function(content) {
                this_.myContent = content
            })
        }
    })

    var vm = new Vue({
      el: "#root"
    })
  </script>
上一篇 下一篇

猜你喜欢

热点阅读