vue通信传值的多种方式(详细)

Posted Node前端

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue通信传值的多种方式(详细)相关的知识,希望对你有一定的参考价值。

后台看见有人需要了解vue传值,今天就来了解下

一、通过路由带参数进行传值

①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等)

 
   
   
 
  1. this.$router.push({ path: '/conponentsB', query: { orderId: 123 } })

②在B组件中获取A组件传递过来的参数

 
   
   
 
  1. this.$route.query.orderId

二、通过设置 Session Storage缓存的形式进行传递

①两个组件A和B,在A组件中设置缓存orderData

 
   
   
 
  1. const orderData = { 'orderId': 123, 'price': 88 }

  2. sessionStorage.setItem('缓存名称', JSON.stringify(orderData)

②B组件就可以获取在A中设置的缓存了

 
   
   
 
  1. const dataB = JSON.parse(sessionStorage.getItem('缓存名称'))

此时 dataB 就是数据 orderData

朋友们可以百度下 Session Storage(程序退出销毁) 和 Local Storage(长期保存) 的区别。

三、父子组件之间的传值

1.父组件往子组件传值props

①定义父组件,父组件传递 number这个数值给子组件,如果传递的参数很多,推荐使用json数组{}的形式

②定义子组件,子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型,如果不符合会报错。

vue通信、传值的多种方式(详细)

["number","string"]就可以了,中括号包裹,多个值使用,分隔。

③假如接收的参数 是动态的,比如 input输入的内容 v-model的形式

注意:传递的参数名称 支持驼峰命名,下图 描述不正确(1.0是不支持的)

vue通信、传值的多种方式(详细)

vue通信、传值的多种方式(详细)

④父子组件传值,数据是异步请求,有可能数据渲染时报错 原因:异步请求时,数据还没有获取到但是此时已经渲染节点了

解决方案:可以在 父组件需要传递数据的节点加上  v-if = false,异步请求获取数据后,v-if = true

(二)、子组件往父组件传值,通过emit事件

vue通信、传值的多种方式(详细)

vue通信、传值的多种方式(详细)

四、不同组件之间传值,通过eventBus(小项目少页面用eventBus,大项目多页面使用 vuex)

①定义一个新的vue实例专门用于传递数据,并导出

vue通信、传值的多种方式(详细)

②定义传递的方法名和传输内容,点击事件或钩子函数触发eventBus.emit事件

vue通信、传值的多种方式(详细)

③接收传递过来的数据

注意:enentBus是一个另一个新的Vue实例,区分两个this所代表得vue实例

vue通信、传值的多种方式(详细)

五、vuex进行传值

为什么使用vuex?

vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),或者大型spa单页面框架项目,页面多并且一层嵌套一层的传值,异常麻烦,用vuex来维护共有的状态或数据会显得得心应手。

需求:两个组件A和B,vuex维护的公共数据是 餐馆的名称 resturantName,默认餐馆名称是 飞歌餐馆,那么现在A和B页面显示的就是飞歌餐馆。如果A修改餐馆名称 为 A餐馆,则B页面显示的将会是 A餐馆,反之B修改同理。这就是vuex维护公共状态或数据的魅力,在一个地方修改了数据,在这个项目的其他页面都会变成这个数据。

vue通信、传值的多种方式(详细)

①使用 vue-cli脚手架工具创建一个工程项目,工程目录,创建组件A和组件B路由如下:

vue通信、传值的多种方式(详细)

路由如下:

 
   
   
 
  1. import Vue from 'vue'

  2. import Router from 'vue-router'

  3. import componentsA from '@/components/componentsA'

  4. import componentsB from '@/components/componentsB'

  5. Vue.use(Router)

  6. export default new Router({

  7. mode: 'history',

  8. routes: [

  9. {

  10. path: '/',

  11. name: 'componentsA',

  12. component: componentsA

  13. },

  14. {

  15. path: '/componentsA',

  16. name: 'componentsA',

  17. component: componentsA

  18. },

  19. {

  20. path: '/componentsB',

  21. name: 'componentsB',

  22. component: componentsB

  23. }

  24. ]

  25. })

app.vue

 
   
   
 
  1. <template>

  2. <div id="app">

  3. <router-view/>

  4. </div>

  5. </template>

  6. <script>

  7. export default {

  8. name: 'App'

  9. }

  10. </script>

  11. <style>

  12. #app {

  13. font-family: 'Avenir', Helvetica, Arial, sans-serif;

  14. -webkit-font-smoothing: antialiased;

  15. -moz-osx-font-smoothing: grayscale;

  16. text-align: center;

  17. color: #2c3e50;

  18. margin-top: 60px;

  19. }

  20. </style>

②开始使用vuex,新建一个 sotre文件夹,分开维护 actions mutations getters

②在store/index.js文件中新建vuex 的store实例

*as的意思是 导入这个文件里面的所有内容,就不用一个个实例来导入了。

 
   
   
 
  1. import Vue from 'vue'

  2. import Vuex from 'vuex'

  3. import * as getters from './getters' // 导入响应的模块,*相当于引入了这个组件下所有导出的事例

  4. import * as actions from './actions'

  5. import * as mutations from './mutations'

  6. Vue.use(Vuex)

  7. // 首先声明一个需要全局维护的状态 state,比如 我这里举例的resturantName

  8. const state = {

  9. resturantName: '飞歌餐馆' // 默认值

  10. // id: xxx 如果还有全局状态也可以在这里添加

  11. // name:xxx

  12. }

  13. // 注册上面引入的各大模块

  14. const store = new Vuex.Store({

  15. state, // 共同维护的一个状态,state里面可以是很多个全局状态

  16. getters, // 获取数据并渲染

  17. actions, // 数据的异步操作

  18. mutations // 处理数据的唯一途径,state的改变或赋值只能在这里

  19. })

  20. export default store // 导出store并在 main.js中引用注册

③actions

 
   
   
 
  1. // 给action注册事件处理函数。当这个函数被触发时候,将状态提交到mutations中处理

  2. export function modifyAName({commit}, name) { // commit 提交;name即为点击后传递过来的参数,此时是 'A餐馆'

  3. return commit ('modifyAName', name)

  4. }

  5. export function modifyBName({commit}, name) {

  6. return commit ('modifyBName', name)

  7. }

  8. // ES6精简写法

  9. // export const modifyAName = ({commit},name) => commit('modifyAName', name)

④mutations

 
   
   
 
  1. // 提交 mutations是更改Vuex状态的唯一合法方法

  2. export const modifyAName = (state, name) => { // A组件点击更改餐馆名称为 A餐馆

  3. state.resturantName = name // 把方法传递过来的参数,赋值给state中的resturantName

  4. }

  5. export const modifyBName = (state, name) => { // B组件点击更改餐馆名称为 B餐馆

  6. state.resturantName = name

  7. }

⑤getters

 
   
   
 
  1. // 获取最终的状态信息

  2. export const resturantName = state => state.resturantName

⑥在main.js中导入 store实例

 
   
   
 
  1. // The Vue build version to load with the `import` command

  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.

  3. import Vue from 'vue'

  4. import App from './App'

  5. import router from './router'

  6. import store from './store'

  7. Vue.config.productionTip = false

  8. /* eslint-disable no-new */

  9. new Vue({

  10. el: '#app',

  11. router,

  12. store, // 这样就能全局使用vuex了

  13. components: { App },

  14. template: '<App/>'

  15. })

  16.  

④在组件A中,定义点击事件,点击 修改 餐馆的名称,并把餐馆的名称在事件中用参数进行传递。 

...mapactions 和 ...mapgetters都是vuex提供的语法糖,在底层已经封装好了,拿来就能用,简化了很多操作。

其中...mapActions(['clickAFn']) 相当于this.$store.dispatch('clickAFn',{参数}),mapActions中只需要指定方法名即可,参数省略。

...mapGetters(['resturantName'])相当于this.$store.getters.resturantName

 
   
   
 
  1. <template>

  2. <div class="componentsA">

  3. <P class="title">组件A</P>

  4. <P class="titleName">餐馆名称:{{resturantName}}</P>

  5. <div>

  6. <!-- 点击修改 为 A 餐馆 -->

  7. <button class="btn" @click="modifyAName('A餐馆')">修改为A餐馆</button>

  8. </div>

  9. <div class="marTop">

  10. <button class="btn" @click="trunToB">跳转到B页面</button>

  11. </div>

  12. </div>

  13. </template>

  14. <script>

  15. import {mapActions, mapGetters} from 'vuex'

  16. export default {

  17. name: 'A',

  18. data () {

  19. return {

  20. }

  21. },

  22. methods:{

  23. ...mapActions( // 语法糖

  24. ['modifyAName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法

  25. ),

  26. trunToB () {

  27. this.$router.push({path: '/componentsB'}) // 路由跳转到B

  28. }

  29. },

  30. computed: {

  31. ...mapGetters(['resturantName']) // 动态计算属性,相当于this.$store.getters.resturantName

  32. }

  33. }

  34. </script>

  35. <!-- Add "scoped" attribute to limit CSS to this component only -->

  36. <style scoped>

  37. .title,.titleName{

  38. color: blue;

  39. font-size: 20px;

  40. }

  41. .btn{

  42. width: 160px;

  43. height: 40px;

  44. background-color: blue;

  45. border: none;

  46. outline: none;

  47. color: #ffffff;

  48. border-radius: 4px;

  49. }

  50. .marTop{

  51. margin-top: 20px;

  52. }

  53. </style>

    B组件同理

 
   
   
 
  1. <template>

  2. <div class="componentsB">

  3. <P class="title">组件B</P>

  4. <P class="titleName">餐馆名称:{{resturantName}}</P>

  5. <div>

  6. <!-- 点击修改 为 B 餐馆 -->

  7. <button class="btn" @click="modifyBName('B餐馆')">修改为B餐馆</button>

  8. </div>

  9. <div class="marTop">

  10. <button class="btn" @click="trunToA">跳转到A页面</button>

  11. </div>

  12. </div>

  13. </template>

  14. <script>

  15. import {mapActions, mapGetters} from 'vuex'

  16. export default {

  17. name: 'B',

  18. data () {

  19. return {

  20. }

  21. },

  22. methods:{

  23. ...mapActions( // 语法糖

  24. ['modifyBName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法

  25. ),

  26. trunToA () {

  27. this.$router.push({path: '/componentsA'}) // 路由跳转到A

  28. }

  29. },

  30. computed: {

  31. ...mapGetters(['resturantName']) // 动态计算属性,相当于this.$store.getters.resturantName

  32. }

  33. }

  34. </script>

  35. <!-- Add "scoped" attribute to limit CSS to this component only -->

  36. <style scoped>

  37. .title,.titleName{

  38. color: red;

  39. font-size: 20px;

  40. }

  41. .btn{

  42. width: 160px;

  43. height: 40px;

  44. background-color: red;

  45. border: none;

  46. outline: none;

  47. color: #ffffff;

  48. border-radius: 4px;

  49. }

  50. .marTop{

  51. margin-top: 20px;

  52. }

  53. </style>


链接:https://blog.csdn.net/qq_35430000/article/details/79291287









以上是关于vue通信传值的多种方式(详细)的主要内容,如果未能解决你的问题,请参考以下文章

vue传值的几种方式

Vue 组件之间通信方式

vue组件之间相互传值的方式

JS——vue 父子组件通信

Vue学习系列 -- 组件通信

Vue组件通信之非父子组件传值