vue组件传值和页面间通信传参多种方式，在vue开发时大部分一个页面内父子间组件传参，第二页是跳路由页面间传参，下面解决几种情况不同传参数方法
一、通过路由带参数进行传值
①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）
|
1 |
<span class="hljs-keyword">this</span>.$router.push({ path: <span class="hljs-string">'/conponentsB'</span>, query: { orderId: <span class="hljs-number">123</span> } }) <span class="hljs-comment">// 跳转到B</span> |
②在B组件中获取A组件传递过来的参数
|
1 |
<span class="hljs-keyword">this</span>.$route.query.orderId |
二、通过设置 Session Storage缓存的形式进行传递
①两个组件A和B，在A组件中设置缓存orderData
|
1 2 |
<span class="hljs-keyword">const</span> orderData = { <span class="hljs-string">'orderId'</span>: <span class="hljs-number">123</span>, <span class="hljs-string">'price'</span>: <span class="hljs-number">88</span> } sessionStorage.setItem(<span class="hljs-string">'缓存名称'</span>, <span class="hljs-built_in">JSON</span>.stringify(orderData)) |
此时 dataB 就是数据 orderData
朋友们可以百度下 Session Storage（程序退出销毁） 和 Local Storage（长期保存） 的区别。
三、父子组件之间的传值，用props
（一）父组件往子组件传值props
①定义父组件，父组件传递 number这个数值给子组件，如果传递的参数很多，推荐使用json数组{}的形式
②定义子组件，子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型，如果不符合会报错。
当然也可以简单一点，如果不考虑数据类型，直接 props:[“number”,”string”]就可以了,中括号包裹，多个值使用，分隔。
③假如接收的参数 是动态的，比如 input输入的内容 v-model的形式
注意：传递的参数名称 支持驼峰命名，下图 描述不正确（1.0是不支持的）
④父子组件传值，数据是异步请求，有可能数据渲染时报错
原因：异步请求时，数据还没有获取到但是此时已经渲染节点了
解决方案：可以在 父组件需要传递数据的节点加上 v-if = false，异步请求获取数据后，v-if = true
（二）、子组件往父组件传值，通过emit事件
四、不同组件之间传值，通过eventBus（小项目少页面用eventBus，大项目多页面使用 vuex）
①定义一个新的vue实例专门用于传递数据，并导出
②定义传递的方法名和传输内容，点击事件或钩子函数触发eventBus.emit事件
③接收传递过来的数据
注意：enentBus是一个另一个新的Vue实例，区分两个this所代表得vue实例
五、vuex进行传值
为什么使用vuex?
vuex主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会显得得心应手。
需求：两个组件A和B，vuex维护的公共数据是 餐馆的名称 resturantName,默认餐馆名称是 飞歌餐馆，那么现在A和B页面显示的就是飞歌餐馆。如果A修改餐馆名称 为 A餐馆，则B页面显示的将会是 A餐馆，反之B修改同理。这就是vuex维护公共状态或数据的魅力，在一个地方修改了数据，在这个项目的其他页面都会变成这个数据。
①使用 vue-cli脚手架工具创建一个工程项目，工程目录，创建组件A和组件B路由如下：
路由如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> Router <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> <span class="hljs-keyword">import</span> componentsA <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/componentsA'</span> <span class="hljs-keyword">import</span> componentsB <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/componentsB'</span> Vue.use(Router) <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({ <span class="hljs-attr">mode</span>: <span class="hljs-string">'history'</span>, <span class="hljs-attr">routes</span>: [ { <span class="hljs-attr">path</span>: <span class="hljs-string">'/'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'componentsA'</span>, <span class="hljs-attr">component</span>: componentsA }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'/componentsA'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'componentsA'</span>, <span class="hljs-attr">component</span>: componentsA }, { <span class="hljs-attr">path</span>: <span class="hljs-string">'/componentsB'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'componentsB'</span>, <span class="hljs-attr">component</span>: componentsB } ] }) |
app.vue
②开始使用vuex，新建一个 sotre文件夹，分开维护 actions mutations getters
②在store/index.js文件中新建vuex 的store实例
*as的意思是 导入这个文件里面的所有内容，就不用一个个实例来导入了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> Vuex <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span> <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> getters <span class="hljs-keyword">from</span> <span class="hljs-string">'./getters'</span> <span class="hljs-comment">// 导入响应的模块，*相当于引入了这个组件下所有导出的事例</span> <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> actions <span class="hljs-keyword">from</span> <span class="hljs-string">'./actions'</span> <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> mutations <span class="hljs-keyword">from</span> <span class="hljs-string">'./mutations'</span> Vue.use(Vuex) <span class="hljs-comment">// 首先声明一个需要全局维护的状态 state,比如 我这里举例的resturantName</span> <span class="hljs-keyword">const</span> state = { <span class="hljs-attr">resturantName</span>: <span class="hljs-string">'飞歌餐馆'</span> <span class="hljs-comment">// 默认值</span> <span class="hljs-comment">// id: xxx 如果还有全局状态也可以在这里添加</span> <span class="hljs-comment">// name:xxx</span> } <span class="hljs-comment">// 注册上面引入的各大模块</span> <span class="hljs-keyword">const</span> store = <span class="hljs-keyword">new</span> Vuex.Store({ state, <span class="hljs-comment">// 共同维护的一个状态，state里面可以是很多个全局状态</span> getters, <span class="hljs-comment">// 获取数据并渲染</span> actions, <span class="hljs-comment">// 数据的异步操作</span> mutations <span class="hljs-comment">// 处理数据的唯一途径，state的改变或赋值只能在这里</span> }) <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> store <span class="hljs-comment">// 导出store并在 main.js中引用注册。</span> |
③actions
|
1 2 3 4 5 6 7 8 9 10 |
<span class="hljs-comment">// 给action注册事件处理函数。当这个函数被触发时候，将状态提交到mutations中处理</span> <span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">modifyAName</span>(<span class="hljs-params">{commit}, name</span>) </span>{ <span class="hljs-comment">// commit 提交；name即为点击后传递过来的参数，此时是 'A餐馆'</span> <span class="hljs-keyword">return</span> commit (<span class="hljs-string">'modifyAName'</span>, name) } <span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">modifyBName</span>(<span class="hljs-params">{commit}, name</span>) </span>{ <span class="hljs-keyword">return</span> commit (<span class="hljs-string">'modifyBName'</span>, name) } <span class="hljs-comment">// ES6精简写法</span> <span class="hljs-comment">// export const modifyAName = ({commit},name) => commit('modifyAName', name)</span> |
④mutations
|
1 2 3 4 5 6 7 |
<span class="hljs-comment">// 提交 mutations是更改Vuex状态的唯一合法方法</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> modifyAName = <span class="hljs-function">(<span class="hljs-params">state, name</span>) =></span> { <span class="hljs-comment">// A组件点击更改餐馆名称为 A餐馆</span> state.resturantName = name <span class="hljs-comment">// 把方法传递过来的参数，赋值给state中的resturantName</span> } <span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> modifyBName = <span class="hljs-function">(<span class="hljs-params">state, name</span>) =></span> { <span class="hljs-comment">// B组件点击更改餐馆名称为 B餐馆</span> state.resturantName = name } |
⑤getters
|
1 2 |
<span class="hljs-comment">// 获取最终的状态信息</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> resturantName = <span class="hljs-function"><span class="hljs-params">state</span> =></span> state.resturantName |
⑥在main.js中导入 store实例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// The Vue build version to <span class="hljs-keyword">load</span> <span class="hljs-keyword">with</span> the <span class="hljs-string">`import`</span> command // (runtime-<span class="hljs-keyword">only</span> <span class="hljs-keyword">or</span> <span class="hljs-keyword">standalone</span>) has been <span class="hljs-keyword">set</span> <span class="hljs-keyword">in</span> webpack.base.conf <span class="hljs-keyword">with</span> an alias. <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span> <span class="hljs-keyword">import</span> <span class="hljs-keyword">store</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'./store'</span> Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-comment">/* eslint-disable no-new */</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router, <span class="hljs-keyword">store</span>, // 这样就能全局使用vuex了 components: { App }, <span class="hljs-keyword">template</span>: <span class="hljs-string">'<App/>'</span> }) |
④在组件A中，定义点击事件，点击 修改 餐馆的名称，并把餐馆的名称在事件中用参数进行传递。
…mapactions 和 …mapgetters都是vuex提供的语法糖，在底层已经封装好了，拿来就能用，简化了很多操作。
其中…mapActions([‘clickAFn’]) 相当于this.$store.dispatch(‘clickAFn’，{参数})，mapActions中只需要指定方法名即可，参数省略。
…mapGetters([‘resturantName’])相当于this.$store.getters.resturantName
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<span class="hljs-tag"><<span class="hljs-name">template</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"componentsA"</span>></span> <span class="hljs-tag"><<span class="hljs-name">P</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span>></span>组件A<span class="hljs-tag"></<span class="hljs-name">P</span>></span> <span class="hljs-tag"><<span class="hljs-name">P</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"titleName"</span>></span>餐馆名称：{{resturantName}}<span class="hljs-tag"></<span class="hljs-name">P</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-comment"><!-- 点击修改 为 A 餐馆 --></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"modifyAName('A餐馆')"</span>></span>修改为A餐馆<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"marTop"</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"trunToB"</span>></span>跳转到B页面<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">template</span>></span> ##script import {mapActions, mapGetters} from 'vuex' export default { name: 'A', data () { return { } }, methods:{ ...mapActions( // 语法糖 ['modifyAName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法 ), trunToB () { this.$router.push({path: '/componentsB'}) // 路由跳转到B } }, computed: { ...mapGetters(['resturantName']) // 动态计算属性，相当于this.$store.getters.resturantName } } ##script# <span class="hljs-comment"><!-- Add "scoped" attribute to limit CSS to this component only --></span> <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>></span><span class="css"> <span class="hljs-selector-class">.title</span>,<span class="hljs-selector-class">.titleName</span>{ <span class="hljs-attribute">color</span>: blue; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>; } <span class="hljs-selector-class">.btn</span>{ <span class="hljs-attribute">width</span>: <span class="hljs-number">160px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>; <span class="hljs-attribute">background-color</span>: blue; <span class="hljs-attribute">border</span>: none; <span class="hljs-attribute">outline</span>: none; <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span>; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>; } <span class="hljs-selector-class">.marTop</span>{ <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">20px</span>; } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> |
B组件同理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<span class="hljs-tag"><<span class="hljs-name">template</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"componentsB"</span>></span> <span class="hljs-tag"><<span class="hljs-name">P</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span>></span>组件B<span class="hljs-tag"></<span class="hljs-name">P</span>></span> <span class="hljs-tag"><<span class="hljs-name">P</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"titleName"</span>></span>餐馆名称：{{resturantName}}<span class="hljs-tag"></<span class="hljs-name">P</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-comment"><!-- 点击修改 为 B 餐馆 --></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"modifyBName('B餐馆')"</span>></span>修改为B餐馆<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"marTop"</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"trunToA"</span>></span>跳转到A页面<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">template</span>></span> ##script## import {mapActions, mapGetters} from 'vuex' export default { name: 'B', data () { return { } }, methods:{ ...mapActions( // 语法糖 ['modifyBName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法 ), trunToA () { this.$router.push({path: '/componentsA'}) // 路由跳转到A } }, computed: { ...mapGetters(['resturantName']) // 动态计算属性，相当于this.$store.getters.resturantName } } ##script## <span class="hljs-comment"><!-- Add "scoped" attribute to limit CSS to this component only --></span> <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>></span><span class="css"> <span class="hljs-selector-class">.title</span>,<span class="hljs-selector-class">.titleName</span>{ <span class="hljs-attribute">color</span>: red; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>; } <span class="hljs-selector-class">.btn</span>{ <span class="hljs-attribute">width</span>: <span class="hljs-number">160px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>; <span class="hljs-attribute">background-color</span>: red; <span class="hljs-attribute">border</span>: none; <span class="hljs-attribute">outline</span>: none; <span class="hljs-attribute">color</span>: <span class="hljs-number">#ffffff</span>; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>; } <span class="hljs-selector-class">.marTop</span>{ <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">20px</span>; } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> |
