扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vuejs中传递数据有哪些方法
  • 415

0
分享到

vuejs中传递数据有哪些方法

2024-04-02 19:04:59 415人浏览 八月长安
摘要

小编给大家分享一下Vuejs中传递数据有哪些方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 传递

小编给大家分享一下Vuejs中传递数据有哪些方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

传递方法：1、父组件中利用“props”向子组件传递数据；2、子组件利用“this.$emit(“事件”)”向父组件传递数据；3、兄弟组件间利用公共文件传递数据；4、父子组件间利用“ref/refs”传递数据；5、使用Vuex传递数据等等。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

一.父传子传递

（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量

（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: [“属性 名”] props:{属性名:数据类型}

代码示例：

//父组件
<template>
  <p>
    <i>父组件</i>
    <!--页面使用-->
    <son :data='name'></son> 
  </p>
</template>

<script>
import son from "./son.vue";//导入父组件
export default {
  components: { son },//注册组件
  name: "父组件",
  data() {
    return {
      name: "Frazier", //父组件定义变量
    };
  },
};
</script>
//子组件
<template>
  <p>{{data}}</p>
</template>

<script>
export default {
components: { },
  name: '子组件',
  props:["data"],
};
</script>

二.子传父传递

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

代码示例：

//父组件
<template>
  <p>
    <i>父组件</i>
    <!--页面使用-->
    <son @lcclick="lcclick"></son>//自定义一个事件
  </p>
</template>

<script>
import son from "./son.vue"; //导入父组件
export default {
  components: { son }, //注册组件
  name: "父组件",
  data() {
    return {};
  },
  methods: {
    lcclick(){
      alert('子传父')
    }
  },
};
</script>
//子组件
<template>
  <p>
    <button @click="lcalter">点我</button>
  </p>
</template>

<script>
export default {
components: { },
  name: '子组件',
  methods: {
    lcalter(){
      this.$emit('lcclick')//通过emit来触发事件
    }
  },
};
</script>

三.兄弟组件通信（bus总线）

（1）在src中新建一个Bus.js的文件，然后导出一个空的vue实例
（2）在传输数据的一方引入Bus.js 然后通过Bus. e m i t ( “ 事 件 名 ” , " 参 数 " ) 来 来 派 发 事 件 ， 数 据 是 以 emit(“事件名”,"参数")来来派发事件，数据是以 emit(“事件名”,"参数")来来派发事件，数据是以emit()的参 数形式来传递
（3）在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})

图片示例：

vuejs中传递数据有哪些方法

vuejs中传递数据有哪些方法

vuejs中传递数据有哪些方法

四.ref/refs（父子组件通信）

（1）ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，
（2）可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种

代码示例：

//父组件
<template>
  <p>
    <button @click="sayHello">sayHello</button>
    <child ref="childForRef"></child>
  </p>
</template>
<script>
import child from './child.vue'
  export default {
    components: { child },
    data () {
      return {
        childForRef: null,
      }
    },
    mounted() {
      this.childForRef = this.$refs.childForRef;
      console.log(this.childForRef.name);
    },
    methods: {
      sayHello() {
        this.childForRef.sayHello()
      }
    }
  }
</script>
//子组件
<template>
  <p>child 的内容</p>
</template>
<script>
export default {
  data () {
    return {
      name: '我是 child',
    }
  },
  methods: {
    sayHello () {
      console.log('hello');
      alert('hello');
    }
  }
}
</script>

五.Vuex通信

组件通过 dispatch 到 actions，actions 是异步操作，再 actions中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而同步到组件，更新其数据状态

代码示例：

//父组件
template>
  <p id="app">
    <ChildA/>
    <ChildB/>
  </p>
</template>
<script>
  import ChildA from './ChildA' // 导入A组件
  import ChildB from './ChildB' // 导入B组件
  export default {
    components: {ChildA, ChildB} // 注册组件
  }
</script>
//子组件A
<template>
 <p id="childA">
   <h2>我是A组件</h2>
   <button @click="transfORM">点我让B组件接收到数据</button>
   <p>因为点了B，所以信息发生了变化：{{BMessage}}</p>
 </p>
</template>
<script>
 export default {
   data() {
     return {
       AMessage: 'Hello，B组件，我是A组件'
     }
   },
   computed: {
     BMessage() {
       // 这里存储从store里获取的B组件的数据
       return this.$store.state.BMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveAMsg，将A组件的数据存放到store里去
       this.$store.commit('receiveAMsg', {
         AMsg: this.AMessage
       })
     }
   }
 }
</script>
//子组件B
<template>
 <p id="childB">
   <h2>我是B组件</h2>
   <button @click="transform">点我让A组件接收到数据</button>
   <p>点了A，我的信息发生了变化：{{AMessage}}</p>
 </p>
</template>

<script>
 export default {
   data() {
     return {
       BMessage: 'Hello，A组件，我是B组件'
     }
   },
   computed: {
     AMessage() {
       // 这里存储从store里获取的A组件的数据
       return this.$store.state.AMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveBMsg，将B组件的数据存放到store里去
       this.$store.commit('receiveBMsg', {
         BMsg: this.BMessage
       })
     }
   }
 }
</script>
//vuex
import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 const state = {
   AMsg: '',
   BMsg: ''
 }
 
 const mutations = {
   receiveAMsg(state, payload) {
     // 将A组件的数据存放于state
     state.AMsg = payload.AMsg
   },
   receiveBMsg(state, payload) {
     // 将B组件的数据存放于state
     state.BMsg = payload.BMsg
   }
 }
 
 export default new Vuex.Store({
   state,
   mutations
 })

六.$parent

通过parent可以获父组件实例 ，然 后通过这个实例就可以访问父组件的属 性和方法 ，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟root，可以获取根组件实例。

代码示例：

// 获父组件的数据
this.$parent.foo

// 写入父组件的数据
this.$parent.foo = 2

// 访问父组件的计算属性
this.$parent.bar

// 调用父组件的方法
this.$parent.baz()

//在子组件传给父组件例子中，可以使用this.$parent.getNum(100)传值给父组件。

七.sessionStorage传值

sessionStorage 是浏览器的全局对象，存在它里面的数据会在页面关闭时清除 。运用这个特性，我们可以在所有页面共享一份数据。

代码示例：

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

注意：里面存的是键值对，只能是字符串类型，如果要存对象的话，需要使用 let objStr = JSON.stringify(obj) 转成字符串然后再存储（使用的时候 let obj = JSON.parse(objStr) 解析为对象）。

推荐一个库 Good-storage ，它封装了sessionStorage ，可以直接用它的api存对象

//localStorage
 storage.set(key,val) 
 storage.get(key, def)
//sessionStorage
 storage.session.set(key, val)
 storage.session.get(key, val)

八.路由传值

使用问号传值

A页面跳转B页面时使用 this. r o u t e r . p u s h ( ' / B ? n a m e = d a n s e e k ' ) B 页 面 可 以 使 用 t h i s . router.push('/B?name=danseek') B页面可以使用 this. router.push('/B?name=danseek')B页面可以使用this.route.query.name 来获取A页面传过来的值

上面要注意router和route的区别

使用冒号传值

配置如下路由：

{
    path: '/b/:name',
    name: 'b',
    component: () => import( '../views/B.vue')
 },

在B页面可以通过 this.$route.params.name 来获取路由传入的name的值

使用父子组件传值
由于router-view本身也是一个组件，所以我们也可以使用父子组件传值方式传值，然后在对应的子页面里加上props，因为type更新后没有刷新路由，所以不能直接在子页面的mounted钩子里直接获取最新type的值，而要使用watch

<router-view :type="type"></router-view>

// 子页面
props: ['type']
watch: {
       type(){
           // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
       },
},

九.祖传孙 $attrs

正常情况下需要借助父亲的props作为中间过渡，但是这样在父亲组件就会多了一些跟父组件业务无关的属性，耦合度高，借助$attrs可以简化些，而且祖跟孙都无需做修改

祖组件：

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>

<script>
    import Parent from './Parent'
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>

父组件

<template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>

<script>
  import Children from './Children'

  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:['name'],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>

子组件

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <p>祖父的性别：{{sex}}</p>
    <p>祖父的年龄：{{age}}</p>
    <p>祖父的爱好：{{hobby}}</p>

    <button @click="sayKnow">我知道啦</button>
  </section>
</template>

<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性，所以name不会传到子组件了
    props:['sex','age','hobby','name'],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit('sayKnow','我知道啦')
      }
    },
    mounted() {
    }
  }
</script>

十.孙传祖使用$listeners

文字内容同第九个

祖组件

<template>
  <p id="app">
    <children-one @eventOne="eventOne"></children-one>
    {{ msg }}
  </p>
</template>
<script>
import ChildrenOne from '../src/components/children.vue'
export default {
  name: 'App',
  components: {
    ChildrenOne,
  },
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    eventOne(value) {
      this.msg = value
    }
  }
}
</script>

父组件

<template>
  <p>
    <children-two v-on="$listeners"></children-two>
  </p>
</template>

<script>
import ChildrenTwo from './childrenTwo.vue'

export default {
  name: 'childrenOne',
  components: {
    ChildrenTwo
  }
}
</script>

子组件

<template>
  <p>
    <button @click="setMsg">点击传给祖父</button>
  </p>
</template>

<script>
export default {
  name: 'children',
  methods: {
    setMsg() {
      this.$emit('eventOne', '123')
    }
  }
}
</script>

十一.promise传参

promise 中 resolve 如何传递多个参数

//类似与这样使用，但实际上后面两个参数无法获取
promise = new Promise((resolve,reject)=>{
    let a = 1
    let b = 2
    let c = 3
    resolve(a,b,c) 
})
promise.then((a,b,c)=>{
    console.log(a,b,c)
})

resolve() 只能接受并处理一个参数，多余的参数会被忽略掉。

如果想多个用数组，或者对象方式。。

数组

promise = new Promise((resolve,reject)=>{
    resolve([1,2,3]) 
})
promise.then((arr)=>{
    console.log(arr[0],arr[1],arr[2])
})

对象

promise = new Promise((resolve,reject)=>{
    resolve({a:1,b:2,c:3}) 
})
promise.then(obj=>{
    console.log(obj.a,obj.b,obj.c)
})

十二.全局变量

定义一个全局变量，在有值的组件直接赋值，在需要的组件内直接使用就可以了。

以上是“vuejs中传递数据有哪些方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网JavaScript频道！

--结束END--

本文标题: vuejs中传递数据有哪些方法

本文链接: https://lsjlt.com/news/81936.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vuejs中传递数据有哪些方法
    小编给大家分享一下vuejs中传递数据有哪些方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 传递...
    99+
    2024-04-02
  • php传递数据的方法有哪些
    这篇文章将为大家详细讲解有关php传递数据的方法有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。php提交数据有两种方式：get方式和post方式。一.通过get方式提交数据比如：https://ww...
    99+
    2023-06-14
  • vue数据传递的方法有哪些
    在Vue中，数据传递的方法有以下几种：1. 父子组件间的数据传递：通过父组件向子组件传递props属性，子组件通过props接收父组...
    99+
    2023-08-09
    vue
  • winform窗体数据传递的方法有哪些
    在WinForm窗体中，数据传递的方法有以下几种：1. 使用属性：在窗体中定义一些公共属性，在需要传递数据的地方设置属性的值，然后在...
    99+
    2023-09-13
    winform
  • SpringMVC中参数的传递方法有哪些
    这篇文章主要介绍“SpringMVC中参数的传递方法有哪些”，在日常操作中，相信很多人在SpringMVC中参数的传递方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2024-04-02
  • vb中传递参数的方法有哪些
    在VB中，传递参数的方法有以下几种： 通过值传递（ByVal）：将参数的值传递给函数或子程序，不会影响原始变量的值。 通过引...
    99+
    2024-04-02
  • Python中函数参数传递方法有哪些
    这篇文章主要介绍“Python中函数参数传递方法有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Python中函数参数传递方法有哪些”文章能帮助大家解决问题。定义和传递参数parameters ...
    99+
    2023-07-06
  • Vuejs中如何实现props数据传递
    这篇文章主要介绍Vuejs中如何实现props数据传递，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！props数据传递①组件实例的作用域：是孤立的，简单的来说，组件和组件之间，即使有...
    99+
    2024-04-02
  • java传递参数的方法有哪些
    在Java中，传递参数的方法有以下几种：1. 值传递：基本数据类型（如int、char、boolean等）和字符串类型（String...
    99+
    2023-09-15
    java
  • shell中脚本参数传递的方法有哪些
    这篇文章主要介绍了shell中脚本参数传递的方法有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。方式一：$0,$1,$2..采用$0,$1,$2..等方式获取脚本命令行传...
    99+
    2023-06-09
  • python函数参数传递的方法有哪些
    在Python中，函数参数传递的方法有以下几种：1. 位置参数传递：根据参数的位置顺序进行传递，参数的值与参数的位置一一对应。例如：...
    99+
    2023-10-19
    python
  • Ajax中servlet后台传递数据的用法有哪些
    Ajax中servlet后台传递数据的用法有哪些 ，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。servlet给前台传递dat...
    99+
    2024-04-02
  • 小程序页面间有哪些传递数据的方法
    小程序页面间传递数据的方法有： 使用全局变量实现数据传递，app.js和app.wxss中的代码都是全局生效的，实现传递数据的代码。//往globalData设置值getApp().globalData.data = &...
    99+
    2024-04-02
  • C++中函数传递的方式有哪些
    本篇文章为大家展示了C++中函数传递的方式有哪些，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。值传递：void fun(int x)  {  x +...
    99+
    2023-06-17
  • Oracle中PLSQL函数传递游标的方法有哪些
    在Oracle中，可以使用以下几种方法传递游标给PL/SQL函数： 使用REF CURSOR参数：在PL/SQL函数的参数列表中...
    99+
    2023-10-22
    Oracle PLSQL
  • Vue中父子组件数据传递的方式有哪些
    这篇文章主要介绍Vue中父子组件数据传递的方式有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！当我们在书写 vue 组件的时候，也许可能会用到数据传递；将父组件的数据传递给子组件...
    99+
    2024-04-02
  • python中函数传递参数的方式有哪些
    本篇文章为大家展示了python中函数传递参数的方式有哪些，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。python可以做什么Python是一种编程语言，内置了许多有效的工具，Python几乎无所不...
    99+
    2023-06-14
  • C++ 中函数参数的传递方式有哪些？
    c++++ 中，传递给函数的参数可通过三种方式传递：传值传递（创建形参副本）、传引用传递（直接访问实参）、传指针传递（访问实参的内存地址）。根据函数行为和内存管理要求选择最佳传递方式，权...
    99+
    2024-04-12
    c++ 函数参数传递方式 作用域
  • Android事件传递的方法有哪些
    Android中事件传递的方法有三种：1. 通过View的dispatchTouchEvent()方法进行事件传递。在这种方式下，事...
    99+
    2023-09-13
    android
  • C++ 函数参数传递方式有哪些？
    在 c++++ 中，有四种参数传递方式：1. 传值（副本）2. 传引用 3. 传常引用 4. 传指针。传值和传引用用于修改原值，常引用用于只读访问，而传指针用于操作内存地址。 C++ ...
    99+
    2024-04-12
    c++ 函数参数传递
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作