vue中各种通信传值方式总结

网络编程 2025/1/4 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

1、路由通信传值

路由通信是通过路由跳转用query把参数带过去，也是vue常用的通信手段。

例子：创建并在路由注册一个组件Head

<template>
 <div id="head">
  <button @click="handleChange">clickMe</button> //给按钮绑定点击事件
 </div>
 
</template>

<script>
export default {
 name: 'Head',
 data () {
 return {
  
 }
 },
 mounted(){
 
 },
 updated(){
 
 },
 methods:{
 handleChange(){
  this.$router.push({ path:"/about" , query:{ text:"我是阿格斯之盾" } }) //路由跳转，并用query带过去参数
 }
 }
}
</script>
<style scoped>

</style>

创建另一个组件About并在路由注册

<template>
 <div id="about">
 <p>我是关于页:{{ message }}</p><button type="button" @click="handleChange">回到首页</button> //显示接收过来的数据
 </div>
 
</template>

<script>

export default {
 name: 'About',
 data () {
 return {
  message: "" 
 }
 },
 mounted(){
 this.message = this.$route.query.text //在生命周期中接收传过来的数据
 },
 updated(){
 
 },
 methods:{
 handleChange(){
  this.$router.push({ path: "/" }) //点击返回首页
 }
 }
}
</script>
<style scoped>

</style>

路由注册的简单代码

import Vue from 'vue'
import Router from 'vue-router'
import Head from '@/components/Head'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
 mode: "history", 
 routes: [
 {
  path: '/',
  name: 'Head',
  component: Head
 },{
  path: '/about',
  name: 'About',
  component: About
 }
 ]
})

2、sessionStorage本地缓存通信

还是列举上面的例子，将它们稍微改一改就可以了，路由配置都一样的。sessionStorage的特点就是浏览器关掉缓存就会消失，这是它区别于localStorage的。

例子： Heade代码：

<template>
 <div id="head">
  <button @click="handleChange">clickMe</button>
 </div>
 
</template>

<script>
export default {
 name: 'Head',
 data () {
 return {
  
 }
 },
 updated(){
 
 },
 methods:{
 handleChange(){
  this.$router.push({ path:"/about"})
 },
 message(){
  var message = "我是阿格斯之盾"
  sessionStorage.setItem('text', message) //创建缓存
 }
 },
 mounted(){
 this.message();
 }
}
</script>
<style scoped>

</style>

About代码：

<template>
 <div id="about">
 <p>我是关于页:{{ message }}</p><button type="button" @click="handleChange">回到首页</button>
 </div>
 
</template>

<script>

export default {
 name: 'About',
 data () {
 return {
  message: ""
 }
 },
 mounted(){
 this.message = sessionStorage.getItem("text") //读取缓存
 },
 updated(){
 
 },
 methods:{
 handleChange(){
  this.$router.push({ path: "/" })
 }
 }
}
</script>
<style scoped>

</style>

3、父组件向子组件通信

定义父组件Head，还是用上面的例子，父组件传递一句话给子组件，如果传递的参数很多，可使用json数组{}的形式。

例子： Head父组件代码

<template>
 <div id="head">
  <About :text=message></About> //将message参数传给子组件
 </div>
 
</template>

<script>
 import About from '@/components/About.vue'
export default {
 name: 'Head',
 components:{
 About
 },
 data () {
 return {
  message : "我是阿格斯之盾"
 }
 },
 mounted(){
 
 },
 methods:{
 
 }
}
</script>
<style scoped>

</style>

About子组件代码

<template>
 <div id="about">
 <p>我是关于页:{{ text }}</p>
 </div>
</template>

<script>

export default {
 name: 'About',
 props:{
 'text':[] //子组件接受数据，[]里面可以写传入类型，如果不符合会报错
 },
 data () {
 return {
  message: ""
 }
 },
 mounted(){
 
 },
 updated(){
 
 },
 methods:{
 handleChange(){
  
 }
 }
}
</script>
<style scoped>

</style>

4、子组件向父组件通信子组件向父组件通信是通过emit事件发送的，话不多说，直接上案例，还是利用上面的案例稍作修改 About子组件代码：

<template>
 <div id="about">
 <button @click="handleChange">点击发送消息给父组件</button>
 </div>
</template>

<script>

export default {
 name: 'About',
 props:{
 'text':[]
 },
 data () {
 return {
  message: ""
 }
 },
 mounted(){
 
 },
 updated(){
 
 },
 methods:{
 handleChange(){
  this.$emit( "child-message" , "我是阿格斯之盾" ) //提交信息
 }
 }
}
</script>
<style scoped>

</style>

Head父组件代码

<template>
 <div id="head">
  <About @child-message = "handleText"></About> //这里传过来父组件需要用一个方法接住
  <p>来自子组件的消息：{{message}}</p>
 </div>
 
</template>

<script>
 import About from '@/components/About.vue'
export default {
 name: 'Head',
 components:{
 About
 },
 data () {
 return {
  message : ""
 }
 },
 mounted(){
 
 },
 methods:{
 handleText(data){ //这里的data就是子组件传过来的内容
  this.message = data
 }
 }
}
</script>
<style scoped>

</style>

5、vuex状态管理

状态管理使用起来相对复杂，但是对于大型项目确实非常实用的。

(1)安装vuex，并建立仓库文件

npm install vuex -s

安装过后在src文件中创建store文件夹，并建立index.js文件，index.js的代码如下：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
 state: {
 message: '我是阿格斯之盾'
 },
 mutations: {
 MESSAGE_INFO (state,view) {
  state.message = view;
 }
 }
})
export default store

（2）在min.js中注册store仓库代码如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

（3）状态的读取和提交还是使用上面的案例，我们以子组件About提交改变状态，父组件Head接受状态并显示出来下面是About组件提交状态

<template>
 <div id="about">
 <button @click="handleChange">点击发送消息给父组件</button>
 </div>
</template>

<script>

export default {
 name: 'About',
 props:{
 'text':[]
 },
 data () {
 return {
  message: ""
 }
 },
 mounted(){
 
 },
 updated(){
 
 },
 methods:{
 handleChange(){
  this.$store.commit("MESSAGE_INFO" , "我是火车王") //提交改变状态
 }
 }
}
</script>
<style scoped>

</style>

Head组件接受状态：

<template>
 <div id="head">
  <About></About>
  <p>来自子组件的消息：{{this.$store.state.message}}</p> //直接使用this.$store.state.message接受数据显示
 </div>
 
</template>

<script>
 import About from '@/components/About.vue'
export default {
 name: 'Head',
 components:{
 About
 },
 data () {
 return {
  message : ""
 }
 },
 mounted(){
 
 },
 methods:{

 }
}
</script>
<style scoped>

</style>

总结：以上就是vue中的通信方式，当然还有一些，比如说eventBus什么的，适用于中小型项目，但是我用的比较少，一般上面的几种在开发中已经够用的，例子很简单，学习是永无止境的，具体更深的东西还得下功夫去研读官网或者其他资料，本文中有不对的地方或者疑惑的地方，还望大家多多指教！谢谢。

vue,传值方式

标签：

vue,传值方式

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“vue中各种通信传值方式总结”

暂无vue中各种通信传值方式总结的评论...

www.ioogu.com 极乐门资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

vue中各种通信传值方式总结

vue,传值方式

JavaScript"模拟事件"的注意要点详解

微信小程序实现banner图轮播效果

评论“vue中各种通信传值方式总结”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

vue中各种通信传值方式总结

vue,传值方式

JavaScript"模拟事件"的注意要点详解

微信小程序实现banner图轮播效果

评论“vue中各种通信传值方式总结”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存