本文共 6050 字，大约阅读时间需要 20 分钟。

父传子如何传递

1.父组件parent代码如下：

2.子组件son代码如下：

子传父如何传递

通过绑定事件然后及$emit传值

1.父组件parent代码如下

2.子组件son代码如下：

Vue兄弟组件传参

介绍：

1.在src文件中创建Bus.js文件，然后抛出一个空的Vue实列

操作如下：

import Vue from 'Vue' export default new Vue()

2.然后，在传输的一方，导入Bus.js文件，在当前组件的方法中用Bus.$emit(“方法名”,要传送的值)进行传参；

兄弟组件一操作如下 :

3 . 再然后，在接收的一方，导入Bus.js文件，在当前组件的方法中用Bus.$on(“方法名”，(data)=>{//回调返回的参数信息})

兄弟组件二操作如下：

Vuex传参

操作步骤：

• 下载持久化插件，命令：cnpm install vuex-persistedstate --save
• 在src文件内store下的js文件使用它

我就拿登录做案列

在Vuex操作

import Vue from 'vue'import Vuex from 'vuex'//1.导入插件import VuexPersistence from 'vuex-persist'//2. 创建对象进行配置const vuexLocal = new VuexPersistence({     storage: window.localStorage,//配置存储介质，默认持久化到本地存储中})Vue.use(Vuex)export default new Vuex.Store({     state: {           user:{   },//存传过来的用户名跟密码        token:"",//存传过来的token值  },  mutations: {     //存储用户名和token  setlong(state,user){       state.user=user    state.token=user.token  },  },   plugins: [vuexLocal.plugin],//引入插件})

在router.js中做登录鉴权

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({     routes: [   {           path: '/Order',        name: 'Order',        component: () => import(/* webpackChunkName: "about" */ '../views/Order.vue')    },    {         path: '/longin',      name: 'longin',      component: () => import( './views/移动端练习/login/longin.vue'),    },  ]})router.beforeEach(function (to, from, next) {       if (to.path('/Order')) {           if (!store.state.name) {               next('/longin')        } else {               next()        }    } else {           next()    }})

localStorage传值：

• 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小。
• localStorage 它是持久化的本地储存，除了我们手动删除，否则会一直在；
• 首先用JSON.stringify 就是把对象的类型转换为字符串类型 ，利用setItem()设置一个指针，存入到localStorage中：

• 用JSON.parse 就是把字符串的类型转换为对象类型，用getItem()方法进行获取localStorage中指针，从而获取数据，渲染数据：

sessionStorage传值：

sessionStorage - 针对一个 session 的数据存储（关闭窗口，存储的数据清空）

• 用JSON.stringify 就是把对象的类型转换为字符串类型 ，利用setItem()设置一个指针，存入到sessionStorage中：

• 用JSON.parse 就是把字符串的类型转换为对象类型，用getItem()方法进行获取sessionStorage中指针，从而数据，渲染数据：

声明全局变量进行传值:

利用全局变量进行传参

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = false//注册全局组件import Commpont from '@/components/commpont.vue'Vue.component(Commpont.name, Commpont)new Vue({     router,  store,  render: h => h(App)}).$mount('#app')

那么在这个组件里面name属性上进行一个绑定

在需要调用的页面进行调用

路由传参

对应的路由配置模块

   
    查看详情
   

使用方法

methods：{     insurance(id) {          //直接调用$router.push 实现携带参数的跳转        this.$router.push({             path: `/particulars/${     id}`,        })}

配对路由

{        path: '/particulars/:id',     name: 'particulars',     component: particulars   }

利用params接收

this.$route.params.id

promise传参

let fn = new Promise((resolve, reject) => {     setTimeout(() => {       reject("ok");  }, 1000);});fn.then().catch(console.log);       // 方式一fn.then(console.log, console.log);  // 方式二

vue-router query和params传参(接收参数)$router跟$route的区别

1.query方式传参和接收参数

传参: this.$router.push({           path:'/xxx',        query:{             id:id        }      })  接收参数:this.$route.query.id

注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！

• 1.$router为VueRouter实例，想要导航到不同URL，则使用router.push方法

• 2.$route为当前router跳转对象，里面可以获取name、path、query、params等

2.params方式传参和接收参数

传参: this.$router.push({           name:'xxx',        params:{             id:id        }      })  接收参数:this.$route.params.id

注意:params传参，push里面只能是 name:‘xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

this.$refs 传值：

• 在父组件内的子组件标签上使用ref属性=“方法名”；

• 子组件在methods内自定义一个方法，绑定一个值并声明，等待父祖件传来的命令；

$parent传值：

$parent 属性可以用来从一个子组件访问父组件的实例;

   
	
    
   
Vue.component('my-son',{   	template:'
   
    父组件：{   {this.$parent.msg}}
   
'})new Vue({     	el:"#add",    data:{   		msg:'父组件文本'	},    methods:{   }})

$child传值:

返回的是一个组件集合:

   
   
    设置子元素   
       
    
   
    Vue.component('my-con',{   	data(){   	    return{   	        sonMsg:'子组件文本 my-con'	    }	},	template:`
   
	    
    
     my-con:{    {sonMsg}}
    
	
   
`,	Vue.component('my-con2',{   	data(){   	    return{   	        sonMsg:'子组件文本'	    }	},	template:`
   
    	   my-con2:{    {sonMsg}}	
   
`,		});new Vue({       el:"#add",    methods:{           getSonText(){               console.log(this.$children)        }    }})