2018-09-25

非父组件
<div class="box">
<first></first>
<second></second>
</div>

<script src="js/vue.js"></script>
<script>
    var sent = new Vue()//中间量

    Vue.component("first",{
        template:`
            <div>
                <h1>这是first组件</h1>
                <button @click='add'>传送数据</button>
            </div>
        `,
        data:function(){
            return{
                msg:'hello vue'
            }
        },
        methods:{
            add:function(){
                sent.$emit("sentMsg",this.msg) 
            }
        }
    })
    
    Vue.component("second",{
        template:`
            <div>
                <h1>这是second组件</h1>
                <p>{{mess}}</p>
            </div>
        `,
        data:function(){
            return{
                mess:''
            }
        },
         mounted:function(){//因为mounted是vue的生命周期，所以用箭头函数用this指向组件
            sent.$on("sentMsg",msg=>{
                this.mess = msg
            })
        }

    })
    
    new Vue({
        el:'.box'
    })
</script>

组件嵌套
<div id="app">
<router-link to='/home'>首页</router-link>
<router-link to='/user'>用户页</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
var Home={
template:<h1>这是首页</h1>
}
var User={
template:<div> <h1>这是用户页</h1> <ul> <li> <router-link to='/user/regist'>注册</router-link> </li> <li> <router-link to='/user/login'>登录</router-link> </li> </ul> <router-view></router-view> </div>
}
var Regist={
template:<h3>这是注册页</h3>
}
var Login={
template:<h3>这是登录页</h3>
}
//3配置路由
const routes=[
{path:'/',component:Home},
{path:'/home',component:Home},
{
path:'/user',component:User,
children:[
{path:'regist',component:Regist},
{path:'login',component:Login}
]
}

]
  //4.创建一个路有实咧
   const router=new VueRouter({
       routes:routes
   })
   
   //5.
   new Vue({
       el:'#app',
       router:router
   })

    </script>