Vue中的八种传参方式你了解多少!

您所在的位置：网站首页 › vue数据传递主要通过什么方法 › Vue中的八种传参方式你了解多少!

Vue中的八种传参方式你了解多少!

#Vue中的八种传参方式你了解多少!| 来源: 网络整理| 查看: 265

在这里插入图片描述

一.父传子,子传父

父传递子如何传递:

(1)在父组件的子组件标签上绑定一个属性，挂载要传输的变量(2)在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}

子传递父如何传递

(1)在父组件的子组件标签上自定义一个事件，然后调用需要的方法(2)在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的

父组件代码

import Child from "../views/Child"; export default { components: { Child }, data() { return { ParentData: "我是父组件中一段文字" }; }, methods: { alter(title) { this.ParentData = title; } } }; #Parent { width: 100%; height: 100%; }

子组件代码

{{ChildData}} 点击更改，子组件触发父组件 export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: ["ChildData"], //我把父组件的文字给传到子组件中去了 data() { //这里存放数据 return {}; }, //计算属性类似于data概念 computed: {}, //监控data中的数据变化 watch: {}, //方法集合 methods: { alter() { var data = "在子组件的方法中通过 this.$emit('事件')来触发在父组件中定义的事件，数据是以参数的形式进行传递的"; this.$emit("alter", data); } }, }

实现效果如图下在这里插入图片描述

vuex中state传值

state 所有的数据都存储在state中 state是一个对象

state组件中的代码

{{item.id}}:{{item.title}} import { mapState } from "vuex"; export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { //这里存放数据 return {}; }, //计算属性类似于data概念 computed: { ...mapState(["stateData"]) }, //监控data中的数据变化 watch: {}, //方法集合 methods: {} };

vuex中state的代码(store.js中)

state: { stateData:[ {id:1,title:"我是vuex中来存储数据的"}, {id:2,title:"所有的数据都存储在state中 state是一个对象"}, {id:3,title:" Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据"}, {id:4,title:"在大型的程序中如果多个组件中用到的数据我们可以存储到vuex,如果小型项目我们可以适当的使用vuex"} ] },

效果如下图在这里插入图片描述

三.sessionStorage,localStorage传值

存储数据

采用setItem()方法存储

存储到本地的数据如下图

在这里插入图片描述

读取数据

通过getItem()方法取值 {{this.localStorage}} {{this.sessionStorage}} export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { //这里存放数据 return { // localStorage, sessionStorage localStorage:"", sessionStorage:"", }; }, //计算属性类似于data概念 computed: {}, //监控data中的数据变化 watch: {}, mounted() { var obj = { username: "康康", Email: "[email protected]" } var obj2 = { username:"小康康", phone:"不告诉你" } localStorage.setItem("localStorage",JSON.stringify(obj)) sessionStorage.setItem("sessionStorage",JSON.stringify(obj2)) this.localStorage=JSON.parse(localStorage.getItem('localStorage')) this.sessionStorage=JSON.parse(sessionStorage.getItem("sessionStorage")) } };

效果实现在这里插入图片描述

四.Promise来传值

Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。 Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。

Promise组件代码

{{item.id}}:{{item.title}} export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { //这里存放数据 return { promiseData:[] }; }, //计算属性类似于data概念 computed: {}, //监控data中的数据变化 watch: {}, //方法集合 methods: {}, //生命周期 - 创建完成（可以访问当前this实例） created() { this.$http .get("/api/promise.json") .then(res => { console.log(res); this.promiseData=res.data }) .catch(err=>{ console.log(err); }); } };

自己模拟promise.json数据

[ { "id": "1", "title": "Promise" }, { "id": 2, "title": "我即将通过promise来被获取到" }, { "id": 3, "title": "我能被通过异步操作来获取成功状态或者失败状态" }, { "id": 4, "title": "我的初始状态时pending,成功状态是fulfilled ,失败状态是rejected " } ]

效果如下图在这里插入图片描述

五.路由传参

先有如下场景点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

查看详情

点击查看详情跳转到页面route

// 路由传参点击查看详情跳转到页面route insurance(title){ this.$router.push("/route?title="+title) }

在router当中配置路由如下

{ path:"/route", name:"router传值", component: () => import('../views/router.vue'), }

在详情页面通过this.$route.query.title来获取传过来的值

{{title}} export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { //这里存放数据 return { title: "" }; }, //计算属性类似于data概念 computed: {}, //监控data中的数据变化 watch: {}, //方法集合 methods: {}, //生命周期 - 创建完成（可以访问当前this实例） created() { var title = this.$route.query.title; console.log(title); this.title = title; } };

效果如下在这里插入图片描述

六.eventbus，组件之间的传参

（1）在src中新建一个Bus.js的文件，然后导出一个空的vue实例

import Vue from 'vue' export default new Vue({})

举例说明

在这里插入图片描述

(2)在传输数据的一方引入Bus.js 然后通过Bus. e m i t ( “ 事件名 ” , " 参数 " ) 来来派发事件，数据是以 emit(“事件名”,"参数")来来派发事件，数据是以 emit(“事件名”,"参数")来来派发事件，数据是以emit()的参数形式来传递

state组件是传输数据的一方

{{item.id}}:{{item.title}} BUS,点我会进行兄弟间通信 import { mapState } from "vuex"; import Bus from "../Bus" export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { //这里存放数据 return { busData:"我是兄弟间的交流的纽带" }; }, //计算属性类似于data概念 computed: { ...mapState(["stateData"]) }, //监控data中的数据变化 watch: {}, //方法集合 methods: { bus(){ Bus.$emit("bus",this.busData) } } };

看图在原有代码上添加

在这里插入图片描述

（3）在接受的数据的一方引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})

created(){ Bus.$on('bus',(data)=>{ console.log(data); }) }

在这里插入图片描述

7.全局变量使用与传值

1.创建全局文件

在这里插入图片描述 2.main.js中引入

在这里插入图片描述 3.直接在组件中使用

{{this.Global.title}} export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { //这里存放数据 return {}; }, //计算属性类似于data概念 computed: {}, //监控data中的数据变化 watch: {}, //方法集合 methods: {}, //生命周期 - 创建完成（可以访问当前this实例） created() { console.log(this.Global); // } };

效果图如下

在这里插入图片描述