<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>demo4</title> <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script> <script src="https://cdn.bootcss.com/vuex/2.3.1/vuex.js"></script> </head> <body> <div id="app"> <add-bar></add-bar> <list-bar></list-bar> </div> <script> let store = new Vuex.Store({ state:{ list:[] }, mutations:{ //参数1是state，参数2是组件传出来的 addItem:function(state,responses){ console.log(responses); state.list.push(responses); } } }); let addBar = { template:` <div> <div> <label for="">账号:</label> <input type="text" v-model="person.account"> </div> <div> <label for="">密码:</label> <input type="text" v-model="person.password"> </div> <div> <input type="button" value="ok" @click="addItem"> </div> </div>`, data(){ return{ person:{ account:'', password:'' } } }, methods:{ addItem(){ this.$store.commit('addItem',{account:this.person.account,password:this.person.password}); this.person.account = this.person.password = ''; } } }; let listBar = { template:` <div> <div v-for="item in items"> {{item.account}} ---- {{item.password}} </div> </div>`, computed:{ items(){ return this.$store.state.list; } } }; new Vue({ el:"#app", store, components:{ 'add-bar':addBar, 'list-bar':listBar } }) </script> </body> </html>
vuex 入门组件间传值
猜你喜欢
转载自blog.csdn.net/qq_40285497/article/details/79913640
今日推荐
周排行