[JavaScript知识库] 【Vue】组件间传值的三种方式：父传子，子传父，非父子传值

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【Vue】组件间传值的三种方式：父传子，子传父，非父子传值 -> 正文阅读

[JavaScript知识库]【Vue】组件间传值的三种方式：父传子，子传父，非父子传值

引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

1，父组件传值给子组件

代码：

<template>
 <div style="padding: 20px;">
   <span>父组件</span><input type="text" v-model="textInfo" />
   <ChildInfo :textInfo="textInfo"></ChildInfo>
 </div>
</template>

<script>
import ChildInfo from '../../views/ChildInfo'
export default {
  name: 'Home',
  components: {ChildInfo},
  data () {
    return {
      textInfo: ''
    }
  }
}
</script>
<style scoped>

</style>

<template>
<div>
  <span>我是子组件：{{textInfo}}</span>
</div>
</template>

<script>
export default {
  name: 'ChildInfo',
  props: {
    textInfo: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>

</style>

2，子组件传值给父组件

<template>
 <div style="padding: 20px;">
   <span>父组件</span><input type="text" v-model="textInfo" />
   <ChildInfo v-on:funb="funb"></ChildInfo>
 </div>
</template>

<script>
import ChildInfo from '../../views/ChildInfo'
export default {
  name: 'Home',
  components: {ChildInfo},
  data () {
    return {
      textInfo: ''
    }
  },
  methods: {
    funb (a) {
      this.textInfo = a
    }
  }
}
</script>
<style scoped>

</style>

<template>
<div>
  <span>我是子组件：{{textInfo}}</span><button @click="funa">&nbsp;&nbsp;发送数据</button>
</div>
</template>

<script>
export default {
  name: 'ChildInfo',
  data () {
    return {
      textInfo: '我是子组件的数据'
    }
  },
  methods: {
    funa () {
      this.$emit('funb', this.textInfo)
    }
  }
}
</script>

<style scoped>

</style>

3，非父子组件传值

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

bus文件可以理解为组件A和B的父组件，组件A注册一个事件上浮给bus文件，组件B在bus文件下监听事件

// bus.js
import Vue from 'vue'
export default new Vue()

<template>
<div>
  A组件:
  <span>{{elementValue}}</span>
  <input type="button" value="点击触发" @click="elementByValue">
</div>
</template>

<script>
import Bus from './bus'
export default {
  name: 'ChildInfo',
  data () {
    return {
      elementValue: 10
    }
  },
  methods: {
    elementByValue: function () {
      Bus.$emit('val', this.elementValue)
    }
  }
}
</script>

<style scoped>

</style>

<template>
<div>
  B组件:
  <span>{{elementValue}}</span>
</div>
</template>

<script>
import Bus from './bus'
export default {
  name: 'ChildInfo2',
  data () {
    return {
      elementValue: 0
    }
  },
  mounted: function () {
    var that = this
    // 用$on事件来接收参数
    Bus.$on('val', (data) => {
      that.elementValue = data
    })
  },
  methods: {
  }
}
</script>

<style scoped>

</style>

参考文章：

Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值_lander_xiong的博客-CSDN博客_vue 父传子