Vue技术栈开发学习状态管理总线的使用

Bus1新建一个组件store.vue，注册到路由列表中，并在components目录下新建一个组件AInput.vue（自己创建的组件最好加上前缀）{path:'/store',component:()=>import('@/views/store.vue')}components'AInput.vuestore.vue实现处理输入该标签绑定到handleInput事件。当输入值被修改时，会触发输入中的事件，从而执行handleInput方法。value的显示是通过value兄弟之间的交流，新建一个component组件Ashow.vuereferenceAshow.vue注册组件instore.vueimportAshowfrom'_c/Ashow.vue'//如何跨文件通信：使用bus定义文件夹bus，并创建index.js文件importVuefrom'vue'//引入VueconstBus=newVue()//创建实例exportdefaultBus//exportandimportbusintomain.jsimportBusfrom'./bus'Vue.prototype.$bus=Bus//在Vue中将Bus添加到原型对象中（将bus注册到根实例中）在之前的Vue技术中stack开发学习，Vue路由学习基础创建email.vue添加clickmeexportdefault{methods:{handleClick(){this.$bus.$emit('on-点击','哈哈哈')//传递给总线}}mount(){//lifecycleconsole.log(this.$bus)//创建一个空的总线实例作为交互的中介}}在之前的Vue技术栈开发学习中，Vue路由学习基础中创建的phone.vue是用来接收邮件的事件，比如显示message{{message}}exportdefault{data(){return{message:''}},mount(){//lifecyclethis.$bus.$on('on-click',mes=>{//buseventlistenerthis.message=mes})}}优化总线，不将总线放在单独的文件夹bus/index.js中，重命名为bus.js，放在lib文件夹下。导入路径更改为./lib/busBabyNaming-更懂年轻父母的起名顾问