欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

深入浅析Vue不同场景下组件间的数据交流

程序员文章站 2022-11-25 12:59:48
正文 浅谈vue不同场景下组件间的数据“交流”  vue的官方文档可以说是很详细了。在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法...

正文

浅谈vue不同场景下组件间的数据“交流” 

vue的官方文档可以说是很详细了。在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景。这就是我写这篇文章的目的,探讨不同场景下组件间的数据“交流”的vue实现

父子组件间的数据交流

父子组件间的数据交流可分为两种:

1.父组件传递数据给子组件

2.子组件传递数据给父组件

父组件传递数据给子组件——props

这是组件数据沟通中最常见的场景:你让父组件掌握了数据源,然后传递给子组件,供子组件使用

深入浅析Vue不同场景下组件间的数据交流

许多人会说,这很简单!用props嘛! 对,正因如此,它不是我要讲的主要内容,不过我们还是用代码简单过一遍:

父组件

<template>
 <div id="father">
 {{ '我是父组件' }}
 <son :text = "text"></son>
 </div>
</template>
<script>
import son from './son.vue'
export default {
 data: function () {
 return {
 text: '从父组件传来的数据'
 }
 },
 components: {
 son: son
 }
}
</script>
<style scoped>
</style> 

子组件:

<template>
 <div>
 {{ '我是子组件,我接收了' + text }}
 </div>
</template>
<script>
export default {
 props: {
 text: { type: string, default: '' }
 }
}
</script>
<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
</style>

demo:

深入浅析Vue不同场景下组件间的数据交流

在这个demo里面,我们把“从父组件传来的数据”这一个字符串通过props传递给了子组件 

如果我们希望在子组件中改变父组件的数据的话,可以在父组件中定义一个能改变父组件数据的函数,然后通过props将该函数传递给子组件,并在子组件在适当时机调用该函数——从而起到在子组件中改变父组件数据的效果

子组件传递数据给父组件

子组件传递数据给父组件   方式一:回调传参

父组件:

<template>
 <div id="father">
 {{ '我是父组件,名称是' + componentname }}
 <son :changecomponentname = "changecomponentname"></son>
 </div>
</template>
<script>
import son from './son.vue'
export default {
 data: function () {
 return {
 componentname: '组件a'
 }
 },
 methods: {
 changecomponentname: function (newcomponentname) {
 this.componentname = newcomponentname
 }
 },
 components: {
 son: son
 }
}
</script>
<style scoped>
 #father div{
 padding: 10px;
 margin: 10px;
 border: 1px solid gray;
 }
</style> 

子组件:

<template>
 <div>
 <p>我是子组件:一个button</p>
 <button @click="() => changecomponentname(newcomponentname)">
 把父组件的名称修改为:彭湖湾的组件
 </button>
 </div>
</template>
<script>
export default {
 data: function () {
 return {
 newcomponentname: '彭湖湾的组件'
 }
 },
 props: {
 changecomponentname: {
 type: function,
 default: () => { }
 }
 }
}
</script>
<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
</style>

demo:

点击前:

深入浅析Vue不同场景下组件间的数据交流

点击后:

深入浅析Vue不同场景下组件间的数据交流

图解:

深入浅析Vue不同场景下组件间的数据交流

点击子组件(按钮)的时候,将父组件的名称从“a”修改为“彭湖湾的组件”

我们从父组件向子组件传递了一个函数(changecomponentname)。并在子组件调用这个函数的时候,以参数的形式传递了一个子组件内部的数据(newcomponentname)给这个函数,这样,在父组件中定义的函数(changecomponentname)就可以取得子组件传来的参数了 

【ps】 命名太长不好意思

子组件传递数据给父组件   方式二:自定义事件

父组件:

<template>
 <div id="father">
 <div>
 {{ '我是父组件,我的名称是:' + fathercomponentname }}
 <son v-on:changecomponentname = "changecomponentname"></son>
 </div>
 </div>
</template>
<script>
import son from './son.vue'
export default {
 data: function () {
 return {
 fathercomponentname: 'a组件'
 }
 },
 methods: {
 changecomponentname: function (componentname) {
 this.fathercomponentname = componentname
 }
 },
 components: {
 son: son
 }
}
</script>
<style scoped>
 #father div{
 padding: 10px;
 margin: 10px;
 border:1px solid grey;
 }
</style>

子组件:

<template>
 <div>
 <p>我是子组件:一个按钮</p>
 <button @click="clickcallback">
 修改父组件的名称为:彭湖湾的组件
 </button>
 </div>
</template>
<script>
export default {
 data: function () {
 return {
 fathercomponentname: '彭湖湾的组件'
 }
 },
 methods: {
 clickcallback: function () {
 this.$emit('changecomponentname', this.fathercomponentname)
 }
 }
}
</script>
<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
</style>

 demo:

点击前:

深入浅析Vue不同场景下组件间的数据交流

点击后:

深入浅析Vue不同场景下组件间的数据交流

 图解:

深入浅析Vue不同场景下组件间的数据交流

通过$emit(event, [...参数]),所有的参数将被传递给监听器回调,也就是我们在父组件中定义的changecomponentname方法,从而实现从子组件中给父组件传参

兄弟组件间的数据交流(有共同父组件的兄弟组件)

父组件:

<template>
 <div id="father">
 <div>
 {{ '我是父组件:father' }}
 <eldest-son :text = "text"></eldest-son>
 <youngest-son :changetext="changetext"></youngest-son>
 </div>
 </div> 
</template>
<script>
import eldestson from './eldestson.vue'
import youngestson from './youngestson.vue'
export default {
 data: function () {
 return {
 text: '我是一行文本'
 }
 },
 methods: {
 changetext: function () {
 this.text = '我是经过改动的一行文本'
 }
 },
 components: {
 eldestson: eldestson,
 youngestson: youngestson
 }
}
</script>
<style>
 #father div{
 border: 1px solid grey;
 padding: 10px;
 margin: 10px;
 }
</style>

兄弟组件1:

<template>
 <div>
 <p>我是兄弟组件:eldestson</p>
 <p>我有一个可变数据text:{{ text }}</p>
 </div>
</template>
<script>
export default {
 props: {
 text: {
 type: string,
 default: ''
 }
 }
}
</script>
<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
</style>

兄弟组件2:

<template>
 <div>
 <p>我是兄弟组件:youngestson</p>
 <button @click="changetext">更改eldestson兄弟组件中的文本</button>
 </div>
</template>
<script>
export default {
 props: {
 changetext: {
 type: function,
 default: () => {}
 }
 }
}
</script>
<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
</style>

 点击前:

深入浅析Vue不同场景下组件间的数据交流

点击后:

深入浅析Vue不同场景下组件间的数据交流

 图解:

深入浅析Vue不同场景下组件间的数据交流

如果两个兄弟组件间存在这种数据关系的话,我们可以尝试寻找其共同的父组件,使数据和相关方法“提升”到父组件内部,并向下传给两个子组件 

这样,其中一个子组件取得了数据,另外一个子组件取得了改变数据的方法,便可以实现上述的数据沟通 

【注意】这种场景存在局限性,它要求两个组件有共同父组件。对于这种场景之外的处理方法,请看下文

全局组件间的数据交流——vuex

我上述的许多场景里面,都运用到了props或者函数传参的方式去处理组件间的数据沟通。然而在稍大型的应用里面,它们都不约而同地给我们带来了很大的麻烦

例如:

1.通过props从父组件向子组件传递数据

对于直接的父子关系的组件,数据流显得很简洁明确,但在大型应用里面,我们上下嵌套许多个组件的时候,这就会导致我们的代码非常地繁琐,并难以维护 

2.对于没有共同的父组件的兄弟组件,函数传参的数据传递方式也无能为力了,vue文档里介绍到,你可以通过以$emit和$on函数为基础的“事件总线”沟通数据,但它无法应对更加大型的应用 

这个时候vuex就成为了实现全局组件间数据交流的最佳方案了

vuex拥有一个包含全部顶层状态的单一数据源(state)

1.所有的组件都可以使用这个单一数据源里面的数据

2.所有的组件都可以通过派发 动作(actions)修改这个单一数据源里的数据 

深入浅析Vue不同场景下组件间的数据交流

原本要“走很多弯路”才能实现沟通的数据流,一下子就找到了最短的捷径 

实现view层的数据和model层的解耦

在1,2小节中处理的数据(vue)和第三小节中处理的数据(vuex),在很多时候是两种不同类型的数据,前者是属于view层,仅负责单纯的ui展示,而model层的大多是从后端取得后注入的数据。 

一点建议:

1.vue部分的代码负责构建view层

2.vuex部分的代码负责构建model层

(上述的vue指的是vuex之外的框架体系)

以上述两点为基础,决定某部分的代码到底要写进vue里面还是写进vuex里面,并尽量将两者分开,从而实现view层和model层的解耦,提高前端代码的可维护性和扩展性

总结

以上所述是小编给大家介绍的vue不同场景下组件间的数据交流,希望对大家有所帮助