Vue组件父子间通信01

子组件传递数据 用户已经登录

父组件接收数据 并显示列表，未登录不显示列表

/*
有两个组件，分别是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>

 

posted @ 2017-11-02 13:32  匿名的girl  阅读(255)  评论(0)  编辑  收藏  举报