Vue组件通信（父子组件传值，非父子组件传值）-蒲公英云

主要是整理给自己用的一些面试常用题，这里记录一下vue组件间通信几种方式。

父组件传值到子组件（父传子）

先定义一个子组件，这里我在component文件夹里定义一个child.vue

子组件

<template>
    <div class="about">
        <h1>这里是子组件的变量接受的变量{
   {msg}}</h1>
    </div>
</template>
<script>
    export default {
        props: {
            msg: Number
        }
    }
</script>

父组件

<template>
  <div class="home">
    <div>我是父组件的变量{
   {num}}</div>
    <button @click="add">父组件变量+1</button>
    <Child :msg="num" @getData="getData"></Child>
</template>
<script>
  import Child from '@/components/child.vue'
  export default {
    data() {
      return {
        num: 18
      }
    },
    components: {
      Child
    },
    methods: {
      add() {
        this.num++
      }
    }
  }
</script>

实现效果
在这里插入图片描述
父组件传子组件还是比较容易理解的，实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的数据，而父组件传值给子组件的时候使用 v-bind 将子组件中props预留的变量名绑定到父组件data里面的数据就好了，记得你在子组件定义的数据类型

子组件传值到父组件（子传父）

子组件代码

<template>
    <div class="about">
        <div>
            <input type="text" v-model="inputMsg">
        </div>
        <button @click="setData">把输入的文字传递给父组件</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                inputMsg: ''
            }
        },
        methods: {
            setData() {
                this.$emit("setData", this.inputMsg);
            }
        }
    }
</script>

父组件代码

<template>
  <div class="home">
    <div class="red">父组件默认：{
   {msg}}</div>
    <Child @setData="getData"></Child>
</template>
<script>
  import Child from '@/components/child.vue'
  export default {
    data() {
      return {
        msg: '父组件默认数据'
      }
    },
    components: {
      Child
    },
    methods: {
      getData(data) {
        this.msg = data;
      }
    }
  }
</script>

在这里插入图片描述
子组件传递数据到父组件，子组件通过this.$emit自定义事件向父组件传递信息，父组件监听子组件的事件来接收

非父子组件传值

方法一：

新建一个bus.js文件，在这个文件里实例化一下vue；然后在组件A和组件B中分别引入这个bus.js文件，将事件监听和事件触发都挂到bus.js这个实例上，这样就可以实现全局的监听与触发了。

bus.js文件

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

组件A

<template>
  <div>
    A组件:
    <button @click="AValueChange">传值给B组件</button>
    <span>{
   {AValue}}</span>
  </div>
</template>
<script>
  // 引入公共的bug，来做为中间传达的工具
  import Bus from './bus.js'
  export default {
    data () {
      return {
        AValue: 4
      }
    },
    mounted () {
      var that = this
      // 用$on事件来接收参数
      // Bus.$on("事件名称"，事件处理函数)写在mounted钩子函数里面，事件处理函数里面就写当这个触发事件的回调函数里面，应该干的事。
      Bus.$on('val', (data) => {
        that.AValue = data
      })
    },
    methods: {
      // 触发事件
      AValueChange() {
        Bus.$emit('val', this.AValue)
      }
    }
  }
</script>

组件B

<template>
  <div>
    B组件:
    <button @click="getData">自身+1</button>
    <button @click="BValueChange">传值给A组件</button>
    <span>{
   {BNum}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        BNum: 0
      }
    },
    mounted () {
      var that = this
      // 用$on事件来接收参数
      Bus.$on('val', (data) => {
        that.BNum = data
      })
    },
    methods: {
      getData() {
        this.BNum++
      },
      BValueChange() {
        Bus.$emit('val', this.BNum)
      }
    }
  }
</script>

在这里插入图片描述

方法二：

在main.js，也就是入口文件中，在vue的原型上添加一个bus对象，原理跟方法一类似，只不过更加简单

//在main.js中
Vue.prototype.bus = new Vue()
// 传递组件里的触发事件
this.bus.$emit('updata', this.AValue)
// 接收组件里面的监听事件
this.bus.$on('updata',  (data) => {
      console.log(data)  //data就是触发updata事件带过来的数据
    })

这里就不上详细代码了，因为在方法一里面改下即可。
A组件里面的触发事件

methods: {
      // 传递组件里的触发事件
      AValueChange() {
        this.bus.$emit('updata', this.AValue)
      },
    }

B组件里面的mounted函数里面的监听事件

mounted() {
    var that = this
    // 接收组件里面的监听事件
    this.bus.$on('updata',  (data) => {
      console.log(data)  //data就是触发updata事件带过来的数据
      that.BNum = data
    })
  }