vue中获取标签⽅法
1、HTML DOM querySelector() ⽅法
  按照以前jq⽅式， CSS 选择器来获取元素标签  [在mounted⽅法⾥⾯执⾏]
  document.querySelector获取的是被选中元素的第⼀个元素；
  document.querySelectorAll获取到所有被选中元素；
  eg：document.querySelector("#demo");
    document.querySelector(".demo");
    document.querySelector("p");
    document.querySelector("a, p")
    document.querySelector("p.demo");
js获取子元素    document.querySelector("a[target]");
2、vue的ref和$refs⽅法
  ref是写在html⾥⾯的，相当于标签的索引，$refs 是所有注册过的ref的⼀个集合，然后通过$refs到对应的ref，然后进⾏操作。  ref在dom标签上，则$refs是dom标签；ref在组件上，则$refs是⼦组件实例；
  相同的ref时，到底取得哪⼀个时问题，所以ref优先级也是⽐较重要：
  1、同⼀层级有相同的ref，最终通过$refs取得后⾯的元素（后>前）；
  2、嵌套层级（⽗⼦关系）的标签，最终通过$refs取得⽗亲元素（⽗>⼦）；
  使⽤⽅式：以下举例说明：
  a、单纯获取当前组件的元素
    <p ref="test" id="demo">你好</p>
    在js⾥⾯⽤this.$st就可以获取到p标签
    等同于：ElementById('demo')，但是$refs会减少获取dom节点的消耗
  b、当获取的元素的ref是变量
    <p :ref="test">你好</p>
    在js⾥⾯⽤this.$st]就可以获取到p标签
  c、⽗组件获取⼦组件的⽅法
  ⼦组件
<template>
<div>
childComponent
</div>
</template>
<script>
export default {
name: "child",
methods: {
childClick(e) {
console.log(e)
}
}
}
</script>
  ⽗组件
<template>
<div>
<button @click="parentClick">点击</button>
<Child ref="mychild" />  //使⽤组件标签
</div>
</template>
<script>
import Child from ‘./child‘;  //引⼊⼦组件Child
export default {
name: "parent",
components: {
Child    // 将组件隐射为标签
},
methods: {
parentClick() {
this.$hild.childClick("我是⼦组件⾥⾯的⽅法哦");  // 调⽤⼦组件的⽅法childClick      }
}
}
</script>
既然是取dom，操作dom，所以最好不要在模板或computed⾥使⽤！
这⾥是漂亮的分割线

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。