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

╰半夏微凉° 2021-09-16 12:58 391阅读 0赞

![70][]

![70 1][]

![70 2][]

![70 3][]

![70 4][]

<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>

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>

<style>  
.page-container \{  
  position: absolute;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
\}  
</style>

[70]: /images/20210724/06646e3fcb0445b8956b600f9b434d20.png
[70 1]: /images/20210724/835657d5056f4edfa7fc755993b12876.png
[70 2]: /images/20210724/fe4c01d8b322433694a868e1075fc3b9.png
[70 3]: /images/20210724/5976e795d3d64771be5fa8a418ef8e11.png
[70 4]: /images/20210724/792a9fbce8c842d9ad3f8428da9e8f8a.png