2022/8/31 兄弟组件共享,ref的了解与使用,some,every,reduce复习

兄弟组件之间的数据共享

在VUE2.X里兄弟共享用的方案是 EventBus 

 

 剖析兄弟组件共享数据

 拟定left向right传输数据,创建eventbus中间件后一定将它分别引入到Left和Right内

Left

<template>
  <div class="left-container">
    <button @click="send">把诗发送给right</button>
  </div>
</template>

<script>
import bus from './eventbus'
export default {
  data () {
   return {str:'hello world'}
  },
  methods : {
    send(){
      bus.$emit('share',this.str)
    }
  }
}
</script>

<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>

 创建eventbus.js文件

import vue from 'vue'
export default new vue()

 Right

<template>
  <div class="right-container">
    <h3>Right 组件 </h3>
    <p>{{msgfrom}}</p>
  </div>
</template>

<script>
import bus from './eventbus.js'
export default {
  
  data () {
    return {
    msgfrom : ''
    }
  },
  created(){
    bus.$on('share',(val)=>{
      this.msgfrom=val
    })
  }
}
</script>

<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>

ref引用

 不引入jq来获取dom元素(VUE内建议不使用JQ)

 

<template>
  <div class="app-container">
    <h1 ref="myh1">App 根组件</h1>
    <button @click="showTimes">按钮 </button>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
    </div>
  </div>
</template>

<script>
export default {
  methods : {
    showTimes(){
     this.$refs.myh1.style.color='red'
    }
  }
}
</script>

 ref同时可以加给组件

Left

<template>
  <div class="left-container">
    <h3>Left 组件 ---- {{count}}</h3>
    <button @click="count++">按钮</button>
    <button @click='reset'>重置</button>
  </div>
</template>

<script>
export default {
  data () {
    return {count:0}
  },
  methods : {
   reset() {
    this.count=0
   }
}
}
</script>

<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>

APP

<template>
  <div class="app-container">
    <h1 ref="myh1">App 根组件</h1>
    <button @click="showTimes">按钮 </button>
    <!-- 重置Left组件 -->
    <button @click="onReset">重置Left组件=0</button>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left ref="comLeft"></Left>
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
export default {
  methods : {
    showTimes(){
     this.$refs.myh1.style.color='red'
    },
    onReset(){
      this.$refs.comLeft.reset()
    }
  },
  components : {Left}
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

 

ref例子 

 需求:一个输入框，一个按钮，分别切换显示隐藏 inputVisible为固定写法

this.nextTick 作用是延迟在渲染结束后使用

APP

<template>
  <div class="app-container">
    <h1 ref="myh1">App 根组件</h1>
    <button @click="showTimes">按钮 </button>
    <hr />
    <input  type="text" v-if='inputVisible' @blur="showButton" ref='iptRef'>
    <button v-else @click="showInput">展示输入框</button>
    <hr>

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left ref="comLeft"></Left>
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
export default {
  data () {
       return{
       inputVisible:false
       }
    },
  methods : {
    showButton() {
      this.inputVisible=false
    },
    showInput() {
      this.inputVisible=true
      this.$nextTick(()=>{
        this.$refs.iptRef.focus()
      })
    },
  },
  components : {Left}
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

 复习some,every,reduce

Some方法取代Foreach (满足自己需求好要进行固定语句return true)

  <script>
        const arr = ['小红','老红','老紫']

       arr.some((item,index)=>{
        if(item==='老红') {
            console.log(index)
            return true
        }
       })
    </script>

 Every方法用于检测数组中的所有元素是否都满足指定条件

<script>
      const arr = [
        {id : 1 , name : '西瓜' , state : true},
        {id : 2 , name : '南瓜' , state : true},
        {id : 3 , name : '北瓜' , state : true}
      ]
      //判断数组中每个水果是否被全选（判断条件）
    const res =   arr.every(item => item.state)
    console.log(res)
    </script>

 reduce累加方法

    <script>
      const arr = [
        {id : 1 , name : '西瓜' , state : true , price : 10 , count : 1},
        {id : 2 , name : '南瓜' , state : false , price : 20 , count : 2},
        {id : 3 , name : '北瓜' , state : true , price : 30 , count : 3} 
      ]
      //把已勾选的水果累加起来
   //reduce语法:
   //arr.filter(item=>item.state).reduce((累加的结果,当前循环项)=>{},初始值)
   const mm =  arr.filter(item => item.state).reduce((amt,item)=> amt+= item.price * item.count,0)
    console.log(mm)
    </script>