vue 子传父 与 父传子 与 子传子

子传父

子组件：

methods: {
// childByValue是在父组件on监听的方法
// 第二个参数this.childValue是需要传的值
emitFun(){ //子组件html触发函数(函数名字随便起）
  this.$emit('childByValue', this.childValue)
  }
}

父组件

//html引入子组件 定义一个on的方法监听子组件的状态
 <child v-on:childByValue="childByValueData"></child>

  methods: {
      childByValueData: function (data) {
       // data就是子组件传过来的值
      this.name = data
   }

父传子

父组件

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child> //将数据绑定传向子组件，inputName是子组件接收的参数名
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: '我是父组件传给子组件的数据'
      }
    }
  }
</script>

子组件

  <template>
  <div>
    子组件:
    <span>{{inputName}}</span>   //显示   我是父组件传给子组件的数据
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String; //父组件传来的值，首先需要给传来的值定义类型。
    }
  }
</script>

子传子 (也可以用vuex）

新创建一个js bus.js

import Vue from 'vue'  //‘vue’小写的

export default new Vue;

两个子组件都要引入js。例如组件A传值给组件B

a.vue

//a.vue
<script>
import Bus from './Bus.js';
export default {
  name: 'a',
  components: {
  },
  methods: {
      sendMsg(){ //html调用此方法
          Bus.$emit('send','home数据')；//emit 调用一个send 方法 ，发射一个数据
      }
  },
}
</script>

b.vue

<script>
import Bus from './Bus.js';
export default {
  name: 'b',
  data() {
    return {
      msg: '原始数据'
    }
  },
  components: {

  },
  created() {
     Bus.$on('send', (value) => {  //接收绑定的事件  value是a页面传来的值
        this.msg = value;
      })
  },
  methods: {
    
  },
}
</script>