vue中$refs、$slot、$nextTick相关的语法

1. $refs：

$refs 是 Vue 实例提供的一个属性，用于访问组件或元素的子组件或子元素。可以通过在元素上定义 ref 属性来注册引用，然后在 Vue 实例中通过 $refs 访问到该元素或组件。

示例：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    // 通过 $refs 访问 ChildComponent 实例
    console.log(this.$refs.child);
  }
}
</script>

2. $slot：

$slot 是 Vue 实例提供的一个属性，用于访问组件的插槽内容。可以通过在组件模板中使用 <slot> 标签来定义插槽，然后在父组件中通过 $slot 访问到插槽内容。

示例：

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component>
      <p>Hello, world!</p>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    // 通过 $slot 访问 ChildComponent 的插槽内容
    console.log(this.$slot.default);
  }
}
</script>

3. $nextTick：

$nextTick 是 Vue 实例提供的一个方法，用于在 DOM 更新之后执行回调函数。由于 Vue 异步执行 DOM 更新，所以在修改数据之后立即获取新的 DOM 元素可能会获取到旧的值，需要通过 $nextTick 等待 DOM 更新完成后再获取新的值。

示例：

<template>
  <div>
    <p ref="message">{{ message }}</p>
    <button @click="changeMessage">Change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'New message';
      this.$nextTick(() => {
        // 在 DOM 更新之后获取新的值
        console.log(this.$refs.message.textContent); // New message
      });
    }
  }
}
</script>