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

2023-08-29 01:20:04 65

1、路由通信传值

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

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

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

路由注册的简单代码

importVuefrom'vue'
importRouterfrom'vue-router'
importHeadfrom'@/components/Head'
importAboutfrom'@/components/About'

Vue.use(Router)

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

2、sessionStorage本地缓存通信

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

例子：Heade代码：

About代码：

3、父组件向子组件通信

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

例子：Head父组件代码

About子组件代码

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

Head父组件代码

5、vuex状态管理

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

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

npminstallvuex-s

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

importVuefrom'vue';
importVuexfrom'vuex';

Vue.use(Vuex);

conststore=newVuex.Store({
state:{
message:'我是阿格斯之盾'
},
mutations:{
MESSAGE_INFO(state,view){
state.message=view;
}
}
})
exportdefaultstore

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

importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'
importstorefrom'./store'

Vue.config.productionTip=false

/*eslint-disableno-new*/
newVue({
el:'#app',
router,
store,
components:{App},
template:''
})

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

Head组件接受状态：

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

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

热门推荐

随机推荐