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");

　　　　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.$refs.test就可以获取到p标签

　　　　等同于：document.getElementById('demo')，但是$refs会减少获取dom节点的消耗

　　b、当获取的元素的ref是变量

　　　　<p :ref="test">你好</p>

　　　　在js里面用this.$refs[this.test]就可以获取到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.$refs.mychild.childClick("我是子组件里面的方法哦");  // 调用子组件的方法childClick
      }
    }
  }
</script>

 

既然是取dom，操作dom，所以最好不要在模板或computed里使用！

这里是漂亮的分割线

 

---