新手小白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.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

crazy程序猿丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值