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

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

喜鹊.

9727人浏览 · 2021-04-24 11:52:16

喜鹊. · 2021-04-24 11:52:16 发布

在这里插入图片描述

一.父传子,子传父

父传递子如何传递:

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

子传递父如何传递

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

父组件代码

<template>
  <div id="Parent">
    <Child :ChildData="ParentData" @alter="alter"></Child>
  </div>
</template>
<script>
import Child from "../views/Child";
export default {
  components: { Child },
  data() {
    return {
      ParentData: "我是父组件中一段文字"
    };
  },
  methods: {
    alter(title) {
      this.ParentData = title;
    }
  }
};
</script>
<style lang="scss" scoped>
#Parent {
  width: 100%;
  height: 100%;
}
</style>

子组件代码

<template>
  <div>
    <h2>{{ChildData}}</h2>
    <button @click="alter">点击更改，子组件触发父组件</button>
  </div>
</template>

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

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

vuex中state传值

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

state组件中的代码

<template>
  <div>
    <h3 v-for="item in stateData" :key="item.id">{{item.id}}:{{item.title}}</h3>
  </div>
</template>

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

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()方法取值

<template>
  <div>
    <h2>{{this.localStorage}}</h2>
    <h2>{{this.sessionStorage}}</h2>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      // localStorage,  sessionStorage
      localStorage:"",
      sessionStorage:"",
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  mounted() {
    var obj = {
        username: "康康",
        Email: "3368327138@qq.com"
      }
      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"))
   
  }
};
</script>
<style lang='scss' scoped>
</style>

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

四.Promise来传值

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

Promise组件代码


<template>
  <div>
    <!-- 自己模拟一段json数据放在api中 -->
    <h2 v-for="item in promiseData" :key="item.id">
        {{item.id}}:{{item.title}}
    </h2>
  </div>
</template>

<script>
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);
          
      });
  }
};
</script>
<style lang='scss' scoped>
</style>

自己模拟promise.json数据

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

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

五.路由传参

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

<div  @click="insurance('我是通过路由传参获取到的值')">查看详情</div>

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

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

在router当中配置路由如下

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

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

<template>
  <div>{{title}}</div>
</template>

<script>
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;
  }
};
</script>
<style lang='scss' scoped>
</style>

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

六.eventbus，组件之间的传参

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

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

举例说明

在这里插入图片描述

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

state组件是传输数据的一方

<template>
  <div>
    <h3 v-for="item in stateData" :key="item.id">{{item.id}}:{{item.title}}</h3>
    <button @click="bus">BUS,点我会进行兄弟间通信</button>
  </div>
</template>

<script>
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)
    }
  }
};
</script>
<style lang='scss' scoped>
</style>

看图在原有代码上添加

在这里插入图片描述

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

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

在这里插入图片描述

7.全局变量使用与传值

1.创建全局文件

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

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

<template>
  <div>
    <h2>{{this.Global.title}}</h2>
  </div>
</template>

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

效果图如下

在这里插入图片描述

八.this.$refs的使用与传值

1.给组件加ref
2.可以通过 $r e f s 得到组件，进而调用组件的变量和方法，如 t h i s .$ refs.comp.$el得到了组件中的所有元素

在这里插入图片描述
打印出来的信息如下图

九. $parent 和 $children

1、ref为子组件指定一个索引名称，通过索引来操作子组件；

2、this. $parent可以直接访问该组件的父实例或组件；

在这里插入图片描述

3、父组件也可以通过this.$children 访问它所有的子组件；需要注意 $children 并不保证顺序，也不是响应式的。

在这里插入图片描述

讲到这里终于结束了,这次的博客之旅也让我自己学到了很多知识,愿屏幕前努力的奋斗的你从中能收获多多,完结撒花!!!

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport