Vue2.0中组件之间的数据共享

组件之间的数据共享

父子组件之间的数据传递

1. 父组件向子组件共享数据，要使用自定义属性

 // 父组件
<Son :msg="message" :user="userinfo"></Son>
// 使用子组件，通过属性向子组件传值，可以是任意值、方法，甚至是父组件对象this
// 注意：这里如果没用v-bind，则传递的是字符串message和userinfo
// 注意：age="18" --> 表示传入的age是一个字符串18；:age="18" --> 表示传入的age是数字18
// 使用了v-bind，则属性值就是一个js表达式

<script>
export default {
	data() {
		return {
			message: 'hello',
			userinfo: { name: 'zs', age: 20 }
		}
	}
}
</script>

// 子组件
<template>
	<div>
    <h5> Son 组件</h5>
    <p>父组件传递过来的msg值是：{{ msg }}</p>
    <p>父组件传递过来的user值是：{{ user }}</p>
  </div>
</template>

<script>
export default {
  data(){
  
  },
	props:['msg', 'user']			// 子组件中定义 自定义属性来接收数据
  // 接收到的数据在组件实例对象vc身上(属性)
}
</script>

在使用Son组件的时候，通过v-bind绑定自定义属性，把父组件里面的message和userinfo的数据分别赋给msg和user，也就传递到Son。在Son组件中也能使用这两个数据

实际开发中是先设计好子组件，子组件中已经定义好需要父组件在使用子组件时所需要的属性，父组件在调用子组件时按子组件定义的属性传值。

2. 子组件向父组件共享数据

在子组件中通过 $emit( )来自定义事件，实现子向父传递数据

$emit(‘事件名称’, 需要传递的参数 )

// click点击事件的本质(vue是怎么操作的)
$emit('click', {
	clientX: '',
	clientY: '',
	target: dom元素
})
------------------------------------------------------------
// eg:
// 子组件通过定义事件child-msg的方式将msg传给父组件
// 子组件中有个button按钮，并为其添加click事件
<template>
	<button @click="deliver"></button>
</template>
<script>
	export default {
  	data(){
    	return {
      	msg: '我是子组件的数据'
      }
    },
    methods: {
    	// 按钮点击事件的处理函数
      // 当点击的时候使用$emit()触发事件，把message传给父组件
      deliver(){
      	this.$emit('child-msg', this.msg)
      }
    }
  }
</script>

---------------------------------------------------------------

// 父组件在使用子组件的时候，绑定子组件自定义的child-msg事件
<template>
	<Son @child-msg="getChildMsg"></Son>
</template>

<script>
export default {
	data(){
  	return {
    	message: ''		// 这里的值类型得根据需要传递的类型写
    }
  },
  methods: {								// 通过回调函数来接收数据
  	getChildMsg(val){				// 定义形参val接收数据
    	this.message = val		// 将子组件传过来的数据转存到父组件
    }
  }
}
</script>

---

兄弟组件之间的数据共享

在vue2中，兄弟组件之间的数据共享的方案是EventBus

EventBus使用步骤

1. 创建eventBus.js模块，并向外共享一个Vue实例对象
2. 在数据发送方，调用 bus.$emit( ‘事件名称’, 要发送的数据 ) 方法触发自定义事件 (触发事件)

3. 在数据接收方，调用 bus.$on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件 (绑定事件)，用事件处理函数的形参来接收数据 (事件被触发了就会执行回调函数)

例子：

// eventBus.js文件（核心）

import Vue from 'vue'

// 向外共享Vue的实例对象
export default new Vue()

// 谁导入eventBus.js,谁就能获得一个Vue实例对象

// 兄弟组件Left(数据发送方)
<template>
	<button @click="sendMsg"></button>
</template>
<script>
  import bus from './eventBus.js'	// 导入eventBus.js，用bus接收，得到一个Vue实例
  
	export default {
  	data() {
    	return {
      	msg: 'hello vue.js'	// 要发送的数据
      }
    },
    methods: {
    	sendMsg(){
      	bus.$emit('share', this.msg)		// 自定义share事件，并且传递了msg的数据
      }
    }
  }

</script>

// 兄弟组件Right(数据接收方)
<script>
  import bus from './eventBus.js'			// 导入eventBus.js，用bus接收，得到一个Vue实例
  
	export default {
  	data() {
    	return {
      	msgFromLeft: ''
      }
    },
    created() {					// 周期函数created()   注意：固定的要写在这个函数里面
    	bus.$on('share', val =>{		// $on()绑定share事件，触发事件后调用处理函数，形参val接收Left组件传递的值
      	this.msgFromLeft = val
      })
    }
  }
</script>

总结：

1. 接收方使用$on( )绑定事件

2. 发送放$emit( )触发事件，并传递参数

3. 接收方的自定义事件被触发了，执行回调函数，用形参接收发送方的数据

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖