通过props 及 $emit在父子组件通讯，对应频繁更新状态考虑使用vuex
store.js
export default {// 存储状态值 state: {count: 0},// 状态值的改变方法,操作状态值// 提交mutations是更改Vuex状态的唯一方法 mutations: {// 修改state，第一个参数就是state increment(state) {state.count++}} }
....
父组件.vue
<template><div><child :message="changeMsg" @chageMsg="prent"></child><input type="button" value="父传子" @click="changeMsga"><p>父组件文字:{{fromchildMsg1}}</p><p>count:{{ $store.state.count }}</p><input type="button" value="父组件按钮Count++" @click="parentEvent"></div></template><script>import child from '@/components/Home2'export default {data: function () {return {changeMsg: '1111111',childMsg: '',fromchildMsg1: ''}},methods: {parentEvent: function () {this.$mit('increment');},changeMsga: function () {this.changeMsg = '公司'},prent: function (msg) {this.fromchildMsg1 = msg;}},components: {child}}</script><style scoped></style>
View Code
子组件.vue
<template><div>获取值：<span>{{message}}</span><br><input type="button" value="子组件" @click="submitValue"><p>count:{{ $store.state.count }}</p><input type="button" value="子组件按钮Count++" @click="childEvent"></div></template><script>export default {data: function () {return {}},props:['message'],methods: {childEvent: function(){this.$mit('increment')},submitValue: function(){this.$emit("chageMsg",'222222222222222');}}}</script><style scoped></style>
View Code
初始化会看到，比较low的页面
父子组件传值，箭头
父子组件状态更改 ，点击 （父子组件按钮）会，发现 父子组件数组都在+1.
针对刷新，状态信息无，可以使用本地缓存localstorage
