【组件间的传值】 父传子，子传父，兄弟组件传值，$parent ，$children与ref

1，父组件向子组件传值   示例：

//父组件代码 通过v-bind向子组件传参
<template>
 <div class="container">
   <Childer :current='num'></Childer> //:自定义属性名="父组件的变量"
 </div>
</template>
<script>
import Childer from '@/component/childer' //引入子组件
export default {
  components: {Childer},
  data() {
    return {
     num:0
    }
  }
}
</script>

//子组件代码  通过props接收父组件传参 可直接props:{'current'}
<template>
 <div class="container">
   <p>{{current}}</p>
 </div>
</template>

<script>
export default {
  props:{
   //自定义属性名
    current: {
      type: number,
      default:0
    }  
  }
}
</script>

2，子组件向父组件传值

//子组件代码
<template>
 <div class="container">
   <button @click="submit">提交</button>
 </div>
</template>

<script>
export default {
  data(){
      return{
        formInfo:{name:'名称'},
      }
  },
  methods:{
      submit(){
       //this.$emit('自定义事件',传递参数)
       this.$emit('setFormInfo',this.formInfo)
      }
  }
}
</script>

//父组件代码 @自定义组件='父组件的处理函数'
<template>
 <div class="container">
   <Childer @setFormInfo='getFormInfo'></Childer>
 </div>
</template>
<script>
import Childer from '@/component/childer'
export default {
  components: {Childer},
  methods:{
    //父组件处理函数
    getFormInfo(val){
     console.log(val);  //{name:'名称'}
    }
  }
}
</script>

3，兄弟组件传值

 总线传值：就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件

//新建一个js文件
import Vue from 'vue';
const eventBus= new Vue()  //创建事件总线
export default eventBus;

//在其中一个子组件中传递参数
import eventBus from '@utils/eventBus'
eventBus.$emit('setData','数据')

//注意：$on先进行监听，一旦$emit发布事件后所有组件都可以$on监听到事件。所以传递参数的时候一定已经先进行了监听才能得到参数。比如在父组件中$emit事件放在mounted钩子函数中，等待子组件创建并$on开始监听事件后再去触发$emit发布事件。

//接收组件传参
import eventBus from '@utils/eventBus'
eventBus.$on('send', msg => {
	console.log(msg)  //输出 数据
}

//通过$off移除事件监听
import eventBus from '@u/eventBus'
eventBus.$off('send')  

可以通过1,2的传参方式，利用父组件来实现兄弟组件传值

4，$parent ，$children与$refs

     $parent方法在子组件中可以直接访问该组件的父实例或组件。

//父组件代码块
<template>
 <div class="container">
   <Childer></Childer>
 </div>
</template>
<script>
import Childer from '@/component/childer'
export default {
  components: {Childer},
  data() {
    return {
     status:false
    }
  },
  methods:{
    stateChange(){
    this.status = !this.status 
     return this.status
    },
    
  }
}
</script>

<template>
 <div class="container">
   <button @click="change">改变父组件状态</button>
 </div>
</template>

<script>
export default {
  methods:{
      change(){
       //在子组件中可以通过this.$parent获取父组件中的方法或变量
       this.$parent.stateChange()
      },
  }
}
</script>

$children方法在父组件中可以直接访问子组件的实例，但是不能保证子组件的顺序。

父组件可以通过$refs获取子组件的数据和方法

//父组件代码 给子组件加上 ref属性(ref='属性名')  通过this.$refs.属性名 来调用子组件中的方法和变量
<template>
 <div class="container">
   <Childer ref="child1"></Childer>
   <el-button @click="submit">提交</el-button>
 </div>
</template>
<script>
import Childer from '@/component/childer'
export default {
  components: {Childer},
  methods:{
    submit(){
      console.log(this.$refs.child1.formInfo); //{}
      console.log(this.$refs.child1.getFormInfo('名称')); //{type:1,name:'名称'}
      //可以在父组件中直接通过this.$refs.属性名 对子组件中的变量进行赋值
      this.$refs.child1.state = true
    }
  }
}
</script>

//子组件代码 
<script>
export default {
  data(){
      return{
        formInfo:{},
        state:false
      }
  },
  methods:{
    //在父组件中调用该方法 可进行一些逻辑处理 也可返回参数
     getFormInfo(name){
       this.formInfo.type = 1
       this.formInfo.name = name
       return this.formInfo
     }
  }
}
</script>

最后提示 

关于ref：this.$refs必须要在页面中的ref子组件加载完毕，才可以获取到。否则undefine

  可以用this.$nextTick(()=>{  } ) 等到页面完全渲染完毕之后在调用this.$refs即可