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

4字数 823阅读 1306

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:"大发pk10我
是阿格斯之盾" } }) //路由跳转,并用query带过去参数
 }
 }
}
</script>
<style scoped>
 
</style>

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

<template>
 <div id="about">
 <p>大发pk10我
是大发pk10关于
页:{{ message }}</p><button type="button" @click="handleChange">回到大发pk10首页
</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: "/" }) //点击返回大发pk10首页

 }
 }
}
</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大发pk10本地 缓存通信

还是列举上面的例子,将它们稍微改一改就可以了,路由配置都一样的。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 = "大发pk10我
是阿格斯之盾"
  sessionStorage.setItem('text', message) //创建缓存
 }
 },
 mounted(){
 this.message();
 }
}
</script>
<style scoped>
 
</style>

About代码:

<template>
 <div id="about">
 <p>大发pk10我
是大发pk10关于
页:{{ message }}</p><button type="button" @click="handleChange">回到大发pk10首页
</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 : "大发pk10我
是阿格斯之盾"
 }
 },
 mounted(){
  
 },
 methods:{
  
 }
}
</script>
<style scoped>
 
</style>

About子组件代码

<template>
 <div id="about">
 <p>大发pk10我
是大发pk10关于
页:{{ 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" , "大发pk10我
是阿格斯之盾" ) //提交信息
 }
 }
}
</script>
<style scoped>
 
</style>

Head父组件代码

<template>
 <div id="head">
  <About @child-message = "handleText"></About> //这里传过来父组件需要用一个大发pk10方法
接住
  <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: '大发pk10我
是阿格斯之盾'
 },
 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)状态的读取和提交 还是使用上面的案例,大发pk10大发pk10我 们 以子组件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" , "大发pk10我
是火车王") //提交改变状态
 }
 }
}
</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什么的,适用于中小型项目,但是大发pk10我 用的比较少,一般上面的几种在开发中已经够用的,例子很简单,学习是永无止境的,具体更深的东西还得下功夫去研读官网或者其他资料,本文中有不对的地方或者疑惑的地方,还望大家多多指教!谢谢。

最后

为了大发pk10帮助 大家让学习变得轻松、高效,给大家免费分享一大批资料,大发pk10帮助 大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家大发pk10推荐 一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些大发pk10技术 需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。


大发pk10推荐 阅读大发pk10更多 精彩内容