子组件传递数据 用户已经登录
父组件接收数据 并显示列表，未登录不显示列表
/*
有两个组件，分别是main-component,header-component.
main-component是由header-component和一个列表（有5条数据 [100,200,300,400,500]），
header-component是由一个h1的标签：'这是页头',有一个数据isUserLogin:true
在渲染main-component时候，读取header-component在挂载完毕之后通过事件传递来的数据（isUserLogin），根据该数据的真假来决定列表是否显示.
<child-component @myEvent="recvMsg">
</child-component>
this.$emit('myEvent',myPhone)
*/
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>子与父通信</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <main-component></main-component> </div> <script> //创建父组件 Vue.component("main-component",{ data:function(){ return{ myList:[1,2,3,4,5], isUserLogin:true } }, methods:{ recvMsg:function(msg){ this.isUserLogin = msg; } }, template:` <div> <header-component @checkUserLogin="recvMsg"></header-component> <ul v-if="isUserLogin"> <li v-for="tmp in myList">{{tmp}}</li> </ul> </div>` }) //创建子组件 Vue.component("header-component",{ //data属性中保存用户已经登录 data:function(){ return{ isLogin:false } }, //通过$emit在挂载完成后把用户已经登录的值发传递给父组件 mounted:function(){ this.$emit("checkUserLogin",this.isLogin); }, template:` <div> <h1>这是页头</h1> </div> ` }) // new一个vue实例 new Vue({ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>