2018-09-21非父子传值、路由Vue Router

一、非父子传值
效果图：

body部分：

<div id="itany">
   <child></child>
   <son></son>
 </div>

js部分：

<script src="js/vue.js"></script>
<script>
    var bus=new Vue();
    Vue.component('child',{
        template:`
            <div>
                <h1>这是组件一</h1>
                <button @click='sendMsg'>点击按钮传值</button>
            </div>
        `,
        data:function(){
            return{
                msg:'非父子之间传值'
            }
        },
        methods:{
            sendMsg:function(){
                bus.$emit('send',this.msg)
            }
        }
    })
    Vue.component('son',{
        template:`
            <div>
                <h1>这是组件二</h1>
                <a href="#">{{mess}}</a>
            </div>
        `,
        data:function(){
            return{
                mess:''
            }
        },
        mounted:function(){
            bus.$on('send',msg=>{
                     this.mess=msg;
              })
        }
    })
    new Vue({
        el:"#itany",
    })
</script>

二、路由Vue Router

路由Vue Router 和 Vue.js 的核心深度集成，用于构建单页面