vue中各种通信传值方式总结
程序员文章站
2023-02-25 08:48:25
1、路由通信传值
路由通信是通过路由跳转用query把参数带过去，也是vue常用的通信手段。
例子：创建并在路由注册一个组件head
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什么的，适用于中小型项目，但是我用的比较少，一般上面的几种在开发中已经够用的，例子很简单，学习是永无止境的，具体更深的东西还得下功夫去研读官网或者其他资料，本文中有不对的地方或者疑惑的地方，还望大家多多指教！谢谢。
上一篇： 笑死人的冷幽默图片,有始有终的搞笑
下一篇： 很美,很暴力的成人百态生活趣图