vue 多页面引用 组件之间应该如何传信(使用不了vuex)

事情是这样的。
刚到新公司没多久,老大安排下来一个项目,并且给了一个之前项目的轮子让参考,基于及其喜爱vue,乱糟糟的轮子也没怎么看直接弃掉,使用了webpack配合vue的脚手架(使用了vue-router和vuex,做的是各种顺手),可是没过两天老大在svn上看过之后就不干了,说后端是PHP,前边就不要做成单入口的文件,还是让我参考原先的轮子。
简单交代一下原先的轮子,构建工具是gulp+webpack,主要实在gulp里引用了webpack。
回家苦思冥想了一下,还是放不下vue,好吧,那我就把vue改成多页的引用吧,每一个页面我都创建一个对应的html,js,css,每一个页面里,我都将内容组件化,分成几个部分。
可是这样做问题就来了,

1.没法复用啊,没有主入口文件,虽然每个页面里都写成了vue组件,但是不知如何复用,因为不像单入口文件那样,没有App.js和 mian.js啊。
2.vuex这么可爱的状态管理用不了了,对着各种组件之间的传信小弟是一脸懵逼,根本没有办法传啊。
样式已经写完了,就要进入逻辑阶段,想趁着周末补习一下,改装一下轮子,可是各种文档查下来,越来越蒙。
希望各种大神 可以给个清晰的思路 让小弟可以缕出来一个思路 拜谢了!!!

图片描述

这是项目目录
本地使用node起服务。
views存放html。
common是公共组件。
components是bower本地资源。
剩下的应该就清楚了。
图片描述

这是html文件,其实写的非常死,大神们可以看出来,其实我是把页面分成了组件,问题也暴露了,没法复用,每页都谢了#app(头),aside(尾),并且不知道如何传信
拜托了

阅读 9.1k
4 个回答

两点建议:

1、前后的彻底分离,php只提供接口。前端来控制路由,之后的开发方式你都熟悉了。

2、直接用php模板,就搭页面来说。smarty那一套足够解决你的问题

另外:不要被框架约束,要看你实际需求是不是必须得上vue之类的框架。比如就一个纯信息展示的页面,php吐出来非常容易的事情,你前端去引入一堆框架拉长首屏时间,我觉得这是有病。

兄弟组件使用一个空的 Vue 实例作为事件总线,传递数据。参考:vue兄弟组件通信

用 cookie、localStorage 或者通过后端来进行数据传递吧

关于复用,一些通用的组件如 header、footer、navbar 等应该可以复用的吧

1.首页,多文件的话,传值只能url参数,cookie,localstorage和sessionstorage,先把需要的值储存起来,然后再调用这样。
2.然后服用,有公共部分的话,或许可以提取出来,当一个组件,然后再需要用到的页面都引入这个组件。比如,手机网站常有的底部导航栏或者悬浮按钮等。这些公用组件,在每一个页面引入,就是平行的关系了,互相是无法传值的。比如在首页,你改了底部导航栏组件的某一个值,对于其它引用了底部导航栏组件的页面,是没有影响的。
3.这个是我的一个疑问,为什么一个页面会创建几个vue实例?就用一个vue实例,然后需要什么组件,在引用(import)进来不就行了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题