vue.js 传值方法（父子组件传值、非父子组件传值）

一.组件传值

A.父组件传值给子组件：

基本原理为：props方法

基本写法：例如-父组件对应 Home.vue ；子组件对应 HomeChild.vue

父组件：

1.首先父组件引入子组件，并且注册子组件:

  improt  HomeChild from './HomeChild.vue' 

2.其次在父组件components内注册：

 components：
  {
	HomeChild
  }

3.父组件定义数据(我们要进行传递给子组件的数据)：

data(){

	retuen {
	
		infor:{name:'Eric',age:'22'}
	}
}

4.父组件展示子组件并进行传值(这里的传值必须使用v-bind绑定才能进行传值：

v-bind 简写为 ":"

<home-child :infor="infor" ></home-child>

同样我们也可以使用单标签

<home-child :infor="infor" />

子组件：

1.定义props属性进行接收父组件传递数据：

props:{

	infor:{
	
		type:object, //传递的infor数据为对象类型的，用object进行接收
		
		default(){  //设置默认数据（可以为空，也可以自定义默认数据）
		
			return {}
			
		}
	}
}

2.子组件中使用该传递数据时(取出对应属性)：

<div>姓名：{{infor.name}}---年龄：{{infor.age}}</div>

->2.子组件传值给父组件：

实现原理：$emit （发射事件）

同理父组件引入子组件并且注册（与上面相同）

子组件：

1.创建子组件的数据

data(){

	return {
	
		childinfor:''
		
	}
}

2.子组件定义事件进行传递数据

->input展示的数据：value="childinfor"

->双向数据绑定：v-model="childinfor"

->绑定对应的事件：@imput='inputchange'

具体写法：

<input @imput='inputchange'   value="childinfor" v-model="childinfor" />

3.子组件定义方法

methos:{

	inputchange(){
	
		this.$emit('inputchange',this.childinfor) //发射“inputchange”事件，并且带上childinfor的值
	}
}

父组件：

1.监听事件的发射：

<home-child @input="childinput" />

2.父组件定义方法接收

childinput(event){

	console.log("子组件的数据"+event)
	
}

3.获取的子组件数据为 event 内的数据信息

扩展知识：

1.父组件访问子组件的方法：

<1>$Children直接取出子类的方法
	
	this.$children[i].name   //获取子组件的下标 i ，获取子组件的元素 name

<2>$refs 引用对应的组件（组件定义 ref 属性作为组件的位移标识）

	<home-child  ref="abc" />

	this.$refs.abc.name

2.子组件访问父组件

<1>this.$paren进行访问

*用途一般不多*

<2>this.$root 访问根组件

注：只能获取Vue实例对象的的属性

B.非父子组件传值方式：

->事件总线的方法

<全局定义事件总线>

在main.js内进行定义公共总线事件实现全部组件、页面都可以使用，相

当于全局事件定义。

首先在Vue的protptype(原型)上挂载了一个名字叫做bus的属性，

Vue.prototype.bus = new Vue()，

这个属性指向一个Vue的实例，只要以后调用new Vue()或者创建组件的时候每一个组件上都

会有一个bus属性.

组件内发送事件：

childclick() {

                    this.bus.$emit('change', this.content);   //content：要发送的数据
                    
}

其他组件接收事件

receive(){

                this.bus.$on('change', function(msg) {
                
                    console.log(msg）;  //获取子组件发送的数据
                    
                });
     }