如果我们希望获取组件节点,进行 DOM<相关操作,可以通过 ref
和 $refs
来完成
给元素或组件添加 ref
属性,则该元素或组件实例对象将被添加到当前组件实例对象的 $refs
属性下面
ref两个功能
- 直接操作dom
- 另类的传参方式 只能父传子
该属性的是一个对象,存储了通过ref
绑定的元素对象或者组件实例对象
<li :ref="'li'+i" v-for="i in 10" :key="i">{{i}}</li>
methods: {
getBut(){
// console.log(this.$el) //当前元素唯一根元素
// 给元素添加标识符,使用refs
console.log(this.$refs)
console.log(this.$refs.li1[0])
},
start(){
// console.log(this.$refs.bql);//输出指定的dom/通过别名拿到整个实例化对象
this.$refs.bql.start()
}
},