Vue-获取DOM

利用 ref 和 $refs 可以用于获取 dom 元素

<h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>

mounted() {
    console.log(document.getElementById("h"));
    console.log(this.$refs.myH);
  },

使用ref调用组件内的方法。

<Demo ref="de"></Demo>

import Demo from "./child/demo";

//组件起别名ref
let demoObj = this.$refs.de;
//可以以此调用组件内的方法，变量等
    demoObj.fn();

$nextTick使用

如果我们修改某个出现在DOM里的变量，之后又要获取DOM里的变量值，那么会发现DOM里变量值并未修改成功，因为Vue更新DOM是异步的，用$nextTick解决。

因为vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行。

<p ref="myP">{{ count }}</p>
<button @click="btn">点击count+1, 马上提取p标签内容</button>

btn() {
      this.count++; // vue监测数据更新, 开启一个DOM更新队列(异步任务)
      console.log(this.count) //1
      //因为Vue更新DOM是异步的，所以count虽然完成加一，但这里的DOM还未更新。
      console.log(this.$refs.myP.innerHTML); // 0

      // 解决: this.$nextTick()
      // 过程: DOM更新完会挨个触发$nextTick里的函数体
      this.$nextTick(() => {
        console.log(this.$refs.myP.innerHTML); // 1
      });

      //方法二： async 函数执行时， async btn(){}
      //如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，
      //恢复 async 函数的执行并返回解析值
      await this.$nextTick()
      this.$refs.myP.innerHTML
  },

组件name属性使用 

我们封装的组件-可以自己定义name属性组件名-让使用者有个统一的前缀风格

1.给组件（Demo）起个名字，用组件的name属性值, 来注册组件名字

export default {
  name: "Mmm",
}

2.之后就可以用Mmm当作标签使用

import Demo from "./child/demo";

components: {
    // Demo,
    [Demo.name]: Demo,
  },