vue 组件间的五大传值

五大组件传值

1、父组件向子组件传值

• 父组件：
  直接在引入的组件中 :id="id"
  
• 子组件：
  在date同级的写props=['id],这是简写，最好是严格写，如下

props:{
	id:{
		type:Number/String/Array/Function等,    //类型
		default: default: function() {}或者     //默认值
		default:0 或者
		default() {
			return []
		},
		required：true                 //表示必填项
	}
}

• 输出结果：
  

2、子组件传值到父组件

• 子组件
  组件中this.$emit('event', '这个是子组件传来的值data1')" event表示共用的函数名(自定义命名) ，$emit表示传递方法，调用就可以触发
  
• 父组件
  通过共用的函数名event接受，@event="recdata",event表示共用的函数名，redata表示父组件的函数名
  
• 输出结果
  

3、获取父组件的值

• 父组件
  在父组件中写ref = 'msg'
  
• 子组件
  我们直接可以获取父组件传过来的值this.$parent.msg
  
• 输出结果
  

4、获取子组件的值

• 子组件
  不需要触发
  

• 父组件
  在组件中ref="myson" 然后直接可以通过this.$refs.myson.msg获得子组件的值
  

• 输出结果
  

5、任意组件的传值

分为接受方和发送方
准备工作：新建一个总线文件bus.js 写入 const Bus = new Vue()
当然，如果你很懒，你直接把总线放入Vue 实例中

• 发送方：
  调用把值传递给总线Bus.$emit('resmsg1', '这个是兄弟之间的传值');
  
  如果你是把总线放入vue实例中,那么直接this.$root.Bus.$emit('resmsg1', '这个是兄弟之间的传值')
  
• 接收方
  Bus.$on('resmsg1', function(msg1) {}
  
  如果你是把总线放入vue实例中,那么直接this.$root.Bus.$on('resmsg1', function(msg1) {}
  
• 输出结果