新手小白VUE整理(7)——ref,js数组常用方法,动态组件,插槽,自定义指令

VUE 2.X

1.ref引用

1)什么是ref引用

ref用来辅助开发者在不依赖jQuery的轻快下,获取DOM元素或组件的引用.
每个vue的组件实例上,都包含一个$refs对象,里面存储这对应的DOM元素或组件的引用.默认情况下,组件的$refs指向一个空对象

2)使用示例

• 组件中给html标签添加ref属性,并且命名,名称不能重复

<div class="box2">
  <h2 ref="myh2">ref测试</h2>
  <button @click="showThis">打印this</button>
</div>

• 在methods方法或者其他js操作中,通过this.$refs.名称,来获取对应的DOM元素,比如:

export default {
  methods:{
    showThis(){
      console.log(this)
      console.log(this.$refs.myh2.innerHTML)
    }
  },
}

3)在子组件上使用ref

• 给子组件添加ref属性,并且命名为"leftComRef",示例:

<div class="box">
  <Left :msg="msg" :user="user" ref="leftComRef"></Left>
  <button @click="showSonCom">打印子组件元素</button>
</div>

• 父组件中获取子组件,并操作子组件数据或调用子组件方法

export default {
  methods:{
    showSonCom(){
      console.log(this.$refs.leftComRef.message)
      this.$refs.leftComRef.showMessage()
    }
  },
}
注:给ref属性命名的时候,最好以ref结尾,便于区分

4)this.$nextTick(callback)使用场景

组件的$nextTick(callback)方法,会把callback回调推迟到下一个DOM更新周期之后执行.
通俗的理解是:等组件的DOM更新完成之后,再执行callback回调函数.从而保证callback回调函数可以操作到最新的DOM元素.示例代码:

- 按钮1和按钮2完成显示隐藏功能,按钮添加ref属性
<div class="box3">
  <button  v-if="btnFlag" @click="showBtn" ref="btn1Ref">按钮1:显示按钮2</button>
  <button  v-else @click="showBtn">按钮2:显示按钮1</button>
</div>

- showBtn方法中使用this.$nextTick(callback)
export default {
 data:{
	return {
		btnFlag:true
	}
  },
  methods:{
    showBtn(){
      this.btnFlag = !this.btnFlag
      this.$nextTick(()=>{
        if(this.btnFlag){
          console.log('按下了按钮2,按钮1显示了')
          console.log(this.$refs.btn1Ref.innerHTML)
        }
      })
    }
  },
}

2.js数组常用方法

• Array.