【Vue】浅谈Vue不同场景下组件间的数据交流

2022-04-08 15:13:56

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

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

父子组件间的数据交流

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

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

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

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

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

许多人会说，这很简单！用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:

在这个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:

点击前：

点击后：

图解：

点击子组件（按钮）的时候，将父组件的名称从“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:

点击前：

点击后：

图解：

通过$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>