Vue非父子组件间传值

作者: 秋玄语道 | 来源:发表于2018-06-29 21:36 被阅读0次

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件间传值（Bus/总线/发布订阅模式/观察者模式）</title>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="css/demo.css">
</head>
<body>
<div id="app">
     <child content="Lu"></child>
     <child content="ffy"></child>
</div>
<script>
    Vue.prototype.bus=new Vue()

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

      }
  })
</script>

</body>
</html>