功能分解

菜单隐藏/显示

1. 事件上发

<template>
    <header>
        <p>欢迎大家来访！</p>
        <button class="btn-menu" v-on:click="switchMenu"><i class="iconfont">&#xe61f;</i></button>
    </header>
</template>
<script>
    module.exports = {
        data: function(){
            return {};
        },
        methods: {
          switchMenu: function(){
            this.$dispatch("switchMenu");
          }
        }
    };
</script>

1. 捕获切换按钮事件

   events: {
    switchMenu: function(){
        this.menu = !this.menu;
   }
   

2. 菜单中同步状态

   module.exports = {
    data: function(){
        return {};
    },
    props: ["show"],
    methods: {
        closeMenu: function(){
            console.log("menu show", this.show);
            this.show = false;
        }
    }
   }
   

tab切换

<div class="tab">
    <div class="tab-hd">
        <a href="###" :class="get? 'tab-menu select': 'tab-menu'" v-on:click="switchMenu(true, $event)">收件箱</a>
        <a href="###" :class="!get? 'tab-menu select': 'tab-menu'" v-on:click="switchMenu(false, $event)">发件箱</a>
    </div>
    <div class="tab-bd">
        <div :class="get? 'tab-con show': 'tab-con'">
            <ul>
            </ul>
        </div>
        <div :class="!get? 'tab-con show': 'tab-con'">
            <ul>
                <template v-for="item in message">
                    <v-message :msg="item.content" :id="$index"></v-message>
                </template>
            </ul>
            <div class="send-box">
                <input type="text" v-model="newMessage" />
                <input type="button" v-on:click="addMessage" value="提交" />
            </div>
        </div>
    </div>
</div>

注册事件

methods: {
    switchMenu: function(isGet, event){
        event.preventDefault();
        this.get = isGet;
    }
}

新增消息

1、html

<div class="send-box">
    <input type="text" v-model="newMessage" />
    <input type="button" v-on:click="addMessage" value="提交" />
</div>

2、 javascript

addMessage: function(){
    if(this.newMessage!=""){
        var newMessage = this.newMessage;
        this.message.push({
            content: newMessage
        });
        this.newMessage = "";
    }
}

删除消息

1、注册删除事件

<a href="###" class="btn-delete right" v-on:click="remove($event)">删除</a>

2、构建事件方法

remove: function(event){
    event.preventDefault();
    this.$dispatch("removeMessage", this.id);
}

3、捕获事件

removeMessage: function(index){
    this.message.splice(index,1);
}