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>
以上是 Vue 组件，事件，循环，父子传值，非组件传值 vuex 的全部内容， 来源链接： utcz.com/z/377065.html
