vue基础（四）ref 和 数组 的使用

一、$refs的使用

1、ref引用dom组件实例

每个组件实例上，都包含一个$ref对象，可用来获取DOM元素或组件的引用。

//使用ref属性，给对应组件添加引用名称
<my-counter ref="counterRef"></my-counter>
<button @click="getRef">获取 $refs 的引用</button>

methods:{
  getRef(){
    //通过this.$refs.引用名称 可以引用组件实例
    console.log(this.$refs.conterRef)
    //引用到组件的实例之后，就可以调用组件上的 methods 方法
    this.$refs.counterRef.add()
  }
}

2、this.$nextTick的使用场景

$nextTick(cb)方法把cb回调推迟到下一个DOM更新周期之后执行

等DOM组件更新完成之后，再执行cb回调函数，来保证操作到最新的DOM元素。

this.$nextTick(() =>{
  this.$refs.changeNum.focus()
})

二、数组的使用

1、some 循环

【可以中途终止循环，可用于在数组中寻找元素】

   <script>
        const arr = ['张三', '李四', '王五', '赵六']
        //forEach循环一旦开始就无法中途停止
        arr.forEach((item, index) => {
            if (item === '王五') {
                console.log(index)
                return
            }
        })
        arr.some((item, index) => {
            console.log(index)
            if (item === '王五') {
                return true
            }
        })
    </script>

2、every 循环

【判断数组的每一项是否满足要求】

 <script>
        const arr = [
            { id: 1, name: '山楂', state: true },
            { id: 2, name: '洋芋', state: true },
            { id: 3, name: '果果', state: true }
        ]
        const result = arr.every(item => item.state)
        console.log(result)
    </script>

3、reduce 循环

【需要对循环元素进行累计等计算时，可以使用这个循环】

//案例：计算选中的商品合计金额，state代表选中状态   
<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: 80, count: 3 }
        ]
        // arr.filter(item => item.state).reduce((累加的结果,当前循环项) => {}, 初始值)
        const result = arr.filter(item => item.state).reduce((amt, item) => {
            return amt += item.price * item.count
        }, 0)
        console.log(result)
</script>

本文借鉴b站课程而记录黑马程序员vue前端基础