Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

小白都能看懂的vue中各种通信传值方式,附带详细代码

陌上花早 2019-02-13 18:25:00 阅读数:163 评论数:0 点赞数:0 收藏数:0

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什么的,适用于中小型项目,但是我用的比较少,一般上面的几种在开发中已经够用的,例子很简单,学习是永无止境的,具体更深的东西还得下功夫去研读官网或者其他资料,本文中有不对的地方或者疑惑的地方,还望大家多多指教!谢谢。
版权声明
本文为[陌上花早]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/xwkj/p/10371334.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领