vue2-组件之间数据传递

发布时间:2023-05-19 16:00

举例:
有一个父组件: App.vue
两个子组件:Left.vue、Right.vue,这两者之间是兄弟组件

父组件向子组件传值:自定义属性(:属性名、props)

① 数据传递:

父组件中使用子组件时,直接绑定属性,将要传递的值通过该属性传递给子组件

<子组件名 :属性名="属性值"/>

② 数据接收:

子组件接收父组件传递过来的值,使用:props

export default {
  // 、、、
  props: ['属性名']
  // 、、、
}

③ 数据使用:

子组件接收到父组件传递过来的值后,直接通过props里面的属性名,使用该属性

注意:props里面接收的属性名要和 父组件使用子组件时写的传递的属性名一致

示例

eg:
父组件 App.vue - - -

<template>
  <div>
    <h1>App根组件(父组件)h1>
    <div class="content">
      <Left :messsage="message1"/>
    div>
  div>
template>

<script>
import Left from './Left.vue'

export default {
  name: 'App',
  components: {
    Left
  },
  data() {
    return {
      message1: '你好呀!'
    }
  }
}
script>

<style lang="less">
.content {
  display: flex;
}
style>

子组件 Left.vue - - -

<template>
  <div class="leftContent">
    <h1>Lefth1>
    <p>{{ messsage }}p>
  div>
template>

<script>
export default {
  name: 'Left',
  props: ['messsage']
}
script>

<style lang="less" scoped>
.leftContent {
  width: 300px;
  background-color: #eee;
}
style>

页面效果:

vue2-组件之间数据传递_第1张图片

子组件向父组件传值:自定义事件(@自定义事件名、$emit)

① 数据传递:

子组件中使用 $emit 将数据传递给父组件

this.$emit('自定义事件名', '要传递的数据')

② 数据接收:

父组件使用子组件时,绑定自定义事件,接收子组件传递过来的数据

<子组件名 @自定义事件名="方法名"/>
methods: {
    方法名(val) {
      // val 是子组件传递过来的数据
      // 、、、
    }
  }

③ 数据使用:

数据转存- - -父组件中定义一个变量,将子组件传递过来的数据 转存 到 该变量,然后使用该变量

示例

eg:
子组件 Right.vue - - -

<template>
  <div class="rightContent">
    <h1>Righth1>
    <p>count- - - {{ count }}p>
    <button @click="add">+1button>
  div>
template>

<script>
export default {
  name: 'Right',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count += 1
      // 子向父传递数据
      this.$emit('countChange', this.count)
    }
  }
}
script>

<style lang="less" scoped>
.rightContent {
  width: 300px;
  background: palevioletred;
}
style>

父组件 App.vue - - -

<template>
  <div>
    
    <h1>App根组件(父组件)- - -{{ countFromSon }}h1>
    <div class="content">
      <Left :messsage="message1"/>
      
      <Right @countChange="getCount"/>
    div>
  div>
template>

<script>
import Left from './Left.vue'
import Right from './Right.vue'

export default {
  name: 'App',
  components: {
    Left,
    Right
  },
  data() {
    return {
      message1: '你好呀!',
      countFromSon: 0
    }
  },
  methods: {
    // ①父接收子传递来的数据 val
    getCount(val) {
      // ②转存子转递给父的数据
      this.countFromSon = val
    }
  }
}
script>

<style lang="less">
.content {
  display: flex;
}
style>

页面效果:

vue2-组件之间数据传递_第2张图片

兄弟组件之间传值:EventBus(eventBus.js、 e m i t 、 emit、 emiton)

兄弟组件 Left.vue Right.vue 之间传递数据,例如 Left.vue 向 Right.vue 传递数据

1. 先创建一个 eventBus.js 文件,导出一个 Vue实例,内容如下:

import Vue from 'vue'

export default new Vue()

2. 数据传递:

① 传递数据的组件中,导入 eventBus.js

import bus from './eventBus.js'

② 使用 $emit 传递数据

bus.$emit('自定义事件名', 传递的数据)

3. 数据接收:

① 传递数据的组件中,导入 eventBus.js

import bus from './eventBus.js'

② 使用 $on 接收数据

bus.$on('自定义事件名', val => {
  // ③ 数据转存 、、、
})

4. 数据使用:

数据转存- - -父组件中定义一个变量,将子组件传递过来的数据 转存 到 该变量,然后使用该变量

示例

eg:
传递数据的兄弟组件 Left.vue - - -

<template>
  <div class="leftContent">
    <h1>Lefth1>
    <p>{{ messsage }}p>
    <h2>{{ poem }}h2>
    <button @click="sendPoem">发送诗句button>
  div>
template>

<script>
// ① 导入 eventBus.js
import bus from './eventBus.js'

export default {
  name: 'Left',
  props: ['messsage'],
  data() {
    return {
      poem: '离离原上草,一岁一枯荣。野火烧不尽,春风吹又生。'
    }
  },
  methods: {
    sendPoem() {
      // ② 传递数据 bus.$emit
      bus.$emit('share', this.poem)
    }
  }
}
script>

<style lang="less" scoped>
.leftContent {
  width: 300px;
  background-color: #eee;
}
style>

接收数据的兄弟组件 Right.vue - - -

<template>
  <div class="rightContent">
    <h1>Righth1>
    <p>count- - - {{ count }}p>
    <button @click="add">+1button>
    
    <h3>{{ poemFromLeft }}h3>
  div>
template>

<script>
// ① 导入 eventBus.js
import bus from './eventBus.js'

export default {
  name: 'Right',
  data() {
    return {
      count: 0,
      // ③ 转存数据
      poemFromLeft: ''
    }
  },
  methods: {
    add() {
      this.count += 1
      this.$emit('countChange', this.count)
    }
  },
  created() {
    // ② 接收数据 bus.$on、val
    bus.$on('share', val => {
      // ③ 转存数据
      this.poemFromLeft = val
    })
  }
}
script>

<style lang="less" scoped>
.rightContent {
  width: 300px;
  background: palevioletred;
}
style>

页面效果:

vue2-组件之间数据传递_第3张图片

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号