vue_非父子组件的传值_vue总线机制 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>非父子组件的传值</h3>
    
    <child content="Dell"></child>
    <child content="Lee"></child>
  </div>
</body>
<script type="text/javascript">
  // 1.发布者订阅模式/总线机制/bus/观察者
  // 2.vuex框架
  

  //给每个vue实例都创建一个bus属性，bus属性又实例一个新的vue实例
  Vue.prototype.bus = new Vue()

  Vue.component('child', {
    props: ['content'],
    data () {
      return {
        selfContent: this.content
      }
    },
    template: '<div @click="handleClick">{{selfContent}}</div>',
    methods: {
      handleClick () {
        this.bus.$emit('change',this.selfContent)
      }
    },
    //当实例被挂载以后执行
    mounted () {
      //监听bus触发的change事件
      this.bus.$on('change', msg => {
        this.selfContent = msg
      })
    }

  })
  let vm = new Vue({
    el: '#app'
  })
</script>
</html>

 

posted @ 2020-03-05 16:20  前端之旅  阅读(219)  评论(0)    收藏  举报