Vue 组件之间的三种传值方式

Vue组件之间的传值方式，一般分为三种，父给子传值， 兄弟之间传值， 子给父传值。

父给子传值

顾名思义， 父给子传值，就是组件之间有嵌套关系，是包含的传给被包含的

在 ‘父亲’ 中的操作

传给 ‘子’ big 和 se

<子组件标签 se='red' big='20px'></子组件标签>

在 ‘子’ 中的操作

接收 ‘父’ 传过来的 big 和 se

<!--在模板中应用传递来的数据-->
<input :style="{color:se，font-size:big}">
​<script>  export default {  
   props:['se','big']   //在这里设置要接受的值
   ​</script>
   }
  

父给子传值， ’子‘ 组件修饰父组件传递过来的值

最简单的一种方法 应用 sync

在’父’ 中的操作

<子组件标签 se.sync='red' big='20px'></子组件标签>

在‘子’ 中的操作

在 子中 创建操作按钮 ， 点击按钮，改变颜色，其中 update 是固定语法 ： 后面是要传入的值的名称 ， 后面是要传入的数值。

<button @click="$emit('update:se','blue')">修改</button>

子 给 父 传值的传值

在 ’父‘ 中的操作

父组件，自定义事件 @jieshou 所对应的处理函数 其中的参数，就是接收的数据，如果有多个数据，可以用多个参数接收，

<template>
  <div id="app">
    <h2>{{dt}}</h2>
    注意：receive事件方法不要设置() -->
    <com-son @jieshou="receive"></com-son>
    //子组件
  </div>
</template>

<script>
// 引入、注册、使用 子组件
import ComSon from './components/Son.vue'

export default {
  components: {
    'com-son': ComSon
  },
  data () {
    return {
      dt: ''
    }
  },
  methods: {
    // msg可以接收到当前事件传递过来的数据
    receive (msg) {
      this.dt = msg
    }
  }
}
</script>

在 ‘子’ 中的操作

触发点击事件，就会传给 父组件 值 ‘我过去了哈’

<template>
    <div id="son">
      我是子组件
      <button @click="chuan()">汇报学习情况</button>
    </div>
</template>
<script>
export default {
  methods: {
   
    chuan () {
    
      // this.$emit(事件名称, 传递的数据，数据，数据……)
      this.$emit('jieshou', '我传过去了哈')
      // 这里的 'jieshou' 是父组件声明的事件名称
    }
  }
}
</script>

兄弟传值

兄弟传值 顾名思义 二者之间没有嵌套关系 ， 这就得用一个中间物来联系二者，一般称为bus

定义一个中间传值的 bus.js

import Vue from 'vue'
export default new Vue() 

接受数据的兄弟

import bus from 'bus.js' //导入bus
created(){
  // 定义事件,注意箭头函数应用
  bus.$on('chuan', data=>{
    console.log(data)
    //data就是 '借点钱'
  })
}

发送数据的兄弟

<button @click="sendMsg">给我兄弟代个话</button>
import bus from 'bus.js' //导入bus
export default {
  methods: {
    sendMsg(){
      // 触发 绑定的 事件，并向外传递参数
      bus.$emit('chuan', '借点钱')
    }
  }
}