Vue 组件，事件，循环，父子传值，非组件传值 vuex

<template>
  <div>
    <button @click="changebnt(1)">第一项</button>
    <button @click="changebnt(2)">第二项</button>
    <button @click="changebnt(3)">第三项</button>
    <keep-alive>
      <!-- 保存之前的操作 -->
    <component :is="nowheader"></component>
  </keep-alive>
    {{count}}
    <br>
    <addbtn></addbtn>
    <removebtn></removebtn>
    <br>
    {{message}}
    <one></one>
    <two></two>
     <my-header @first="first" @click.native="deine" :list="list"></my-header>
  </div>
</template>

<script>

import Vue from 'vue';  
import Vuex from 'vuex';  
Vue.use(Vuex);
var store=new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    add:function(state){
      state.count++;
    },
    remove:function(state){
      state.count--
    }
  }
})

var busVM=new Vue();
export default {

  name: "HelloWorld",
  data() {
    return {
      nowheader:'my-header-1',
       message:"Hello World",
       list:["第一项","第二项","第三项"]
      }
    },
    computed:{
      count:function(){
        return store.state.count;
      }
    },
    methods:{
      changebnt:function(index){
        this.nowheader="my-header-"+index;
      },
      first:function(str){
        this.message=str;
      },
      deine:function(){
        console.log("a");
      }
    },
    components:{
      'my-header-1':{
          template:'<div>住监狱<input type="text"></div>'
      },
      'my-header-2':{
          template:'<div>汤玉鹏<input type="text"></div>'
      },
      'my-header-3':{
          template:'<div>唐宇<input type="text"></div>'
      },
      'addbtn':{
        template:'<button @click="setCount">+</button>',
        methods:{
          setCount:function(){
            store.commit('add')
          }
        }
      },
      'removebtn':{
        template:'<button @click="setCount">-</button>',
        methods:{
          setCount:function(){
            store.commit('remove')
          }
        }
      },
      'one':{
        template:'<h2>{{message}}</h2>',
        data:function(){
          return {
            message:"非父子组件传值"
          }
        },
        mounted:function(){
          busVM.$on("chave",function(str){
            console.log(str);
            this.message=str
          }.bind(this))
        }
      },
      'two':{
        template:'<ul><li @click="getfate" v-for="item in list">{{item}}</li></ul>',
        data:function(){
          return {
            list:["one","two","three","four"]
          }
        },
        methods:{
          getfate:function(ev){
            busVM.$emit("chave",ev.target.innerHTML);
          }
        }
      },
      'my-header':{
        props:['list'],
        template:`<div>
                  <h1>{{message}}</h1>
                  <h2 v-on:click='changeCount'>{{count}}</h2>
                  <ul>
                    <li @click="first" v-for='item in list'>{{item}}</li>
                  </ul>
                  <my-nav @changeevent="changeevent" :list="list"></my-nav>
                  </div>`,
        data : function(){
          return {
              count:0,
              message:'Hello typ'
              
          }
        },
        methods: {
          changeCount : function(){
            this.count++;
          },
          first:function(ev){
            console.log(ev.target.innerHTML);
            this.$emit("first",ev.target.innerHTML)
          },
          changeevent:function(str){
            console.log(str);
            this.message=str;
          }
        },
        components:{
          'my-nav':{
            template:`<ul>
                      <li v-for="item in list" @click='getcoutent'>{{item}}</li>
                    </ul>`,
             props:['list'],
             methods:{
              getcoutent:function(ev){
                console.log(ev);
                console.log(ev.target.innerHTML);
                this.$emit("changeevent",ev.target.innerHTML)
              }
             }       
          }
        }
      }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.page-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>