【VUE2.0】7、组件之间的数据共享，$ref引用，$nextTick，数组方法

组件之间的关系

        父子关系

        兄弟关系

组件之间的数据传递

        父向子传值

        子向父传值

        兄弟间传值

父向子传值

        通过自定义属性props传值

子向父传值

        通过自定义事件传值

兄弟组件之间的数据共享

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

ref引用

        ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。

        每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。

        注意：ref=“”里不能定义相同的名字，否则会被后面的覆盖

          使用ref引用组件中的dom元素：

<template>
  <div>
	  <!-- 使用ref属性，为需要操作的dom元素添加引用名称 -->
	  <h3 ref="myH3">123</h3>
	  <button @click="getRef">获取$refs引用</button>
  </div>
</template>

<script>
export default {
	methods:{
		getRef(){
			console.log(this);
			// 通过this.$refs.myH3可以获取到dom元素的引用
			console.log(this.$refs.myH3);
			//操作dom
			this.$refs.myH3.style.color = 'red'
		}
	}
}
</script>

        使用ref引用组件实例

this.$nextTick(callback)方法

    组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。    

数组方法

        forEach方法

        forEach一旦开始，必须循环所有次数后才结束

        即便找到目标，依然执行完4次循环，return不起作用

const arr = ['小红','小王','小张','小兰']
arr.forEach((item,index)=>{
  console.log(1)
  if(item === '小张'){
    console.log(index)
    return
  }
})


      

        some方法

        在数组中找元素，用some比较合适，找到后终止

        return true是固定写法

//找到通过return true结束
const arr = ['小红','小王','小张','小兰']
arr.some((item,index)=>{
	if(item === '小张'){
		console.log(index);
        return true;
	}
})

        every方法

        循环每一项，若所有项均满足条件，最后返回true，否则返回false

const arr = [
	{id:1,name:'西瓜',state:false},
	{id:2,name:'榴莲',state:true},
	{id:3,name:'草莓',state:true}
]
const result = arr.every(item => item.state)
console.log(result);//false

        reduce方法（累加器）

        计算购物车中选中物品的总价格。先用fileter筛选出state为true的元素，然后计算每一项的金额，然后累加计算总额

const arr = [
	{id:1,name:'西瓜',state:false,price:10,count:1},
	{id:2,name:'榴莲',state:true,price:80,count:2},
	{id:3,name:'草莓',state:true,price:20,count:3}
]
let sum = 0
arr.filter(item => item.state).forEach(item => {
	sum += item.price * item.count
})
console.log(sum);

        以上可以使用reduce进行简写

const arr = [
	{id:1,name:'西瓜',state:false,price:10,count:1},
	{id:2,name:'榴莲',state:true,price:80,count:2},
	{id:3,name:'草莓',state:true,price:20,count:3}
]
// arr.filter(item => item.state).reduce((累加的结果,当前循环项) => {},初始值)
const result = arr.filter(item => item.state).reduce((sum,item) => {
	return sum += item.price * item.count
},0)
console.log(result);

        以上reduce又可以简写为：

const arr = [
	{id:1,name:'西瓜',state:false,price:10,count:1},
	{id:2,name:'榴莲',state:true,price:80,count:2},
	{id:3,name:'草莓',state:true,price:20,count:3}
]
const result = arr.filter(item => item.state).reduce((sum,item) => sum += item.price * item.count,0)
console.log(result);