今天是第15节课也是我们vue基础入门组件篇的最后一节课。我们几乎把vue所有的基础都学习完了，如果有遗漏的我们后期遇到了再给大家补上。

ref和$refs获取DOM元素

在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个属性来实现。

Vue 的 $refs 和 ref 属性是 Vue.js 中用于访问和操作 DOM 元素的重要工具。ref 是一个特殊的属性，它被附加到 DOM 元素上，而 $refs 是一个对象，用于存储所有被 ref 属性标识的 DOM 元素。

下面是一个简单的示例，演示了如何使用 ref 和 $refs 属性：

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    methods: {
      handleClick(){
        const inputElement = this.$refs.myInput
        inputElement.value = "Hello, Vue!"
      }
    },
    template: `
      <div>
        <input type="text" ref="myInput">
        <button @click="handleClick">Click me</button>
      </div>
    `
  })
  const vm = app.mount("#app")
</script>

在上面的示例中，我们使用 ref 属性将一个输入框元素标记为 myInput。然后，在 handleClick 方法中，我们使用 $refs 属性来访问该输入框元素，并将其值设置为 "Hello, Vue!"。

注意，我们只能在 Vue 实例的 mounted 钩子函数之后访问 $refs 属性。在 mounted 钩子函数之前，DOM 元素可能还没有被渲染出来，因此 $refs 属性是访问不到的。

我们还可以使用 v-for 指令来循环遍历设置ref属性 这可以帮助我们访问和操作一组dom元素。例如：

<script>
  const app = Vue.createApp({
    data() {
      return {
        items: [
          { id: 1, name: "Item 1" },
          { id: 2, name: "Item 2" },
          { id: 3, name: "Item 3" }
        ]  
      }
    },
    mounted(){
      const itemDivs = this.$refs.itemDivs
      itemDivs.forEach(itemDiv => {
        console.log(itemDiv.textContent) // Output: Item 1, Item 2, Item 3  
      })
    },
    template: `
      <div>
        <div v-for="item in items" :key="item.id" ref="itemDivs">{{ item.name }}</div>
      </div>
    `
  })
  const vm = app.mount("#app")
</script>

获取组件实例

当我们在组件上使用ref属性时，可以通过this.$refs来访问到这个组件的实例，从而调用组件中定义的方法、访问组件的数据属性等。

<script>
  const MyComponent = {
    data(){
      return {
        someData:"xiaozhu"
      }
    },
    methods:{
      someMethod(){
        console.log("someMethod")
      }
    },
    template:`<div>myComponent组件</div>`
  }

  const app = Vue.createApp({
    components: {
      MyComponent
    },
    data() {
      return {
         message: "hello world!"
      }
    },
    methods: {
      handleClick() {
        const myComponentRef = this.$refs.myComponentRef
        myComponentRef.someMethod()
        console.log(myComponentRef.someData)
      }    
    },
    template: `
      <div>
        <my-component ref="myComponentRef"></my-component>
        <button @click="handleClick">Click me</button>
      </div>
    `
  })
  const vm = app.mount("#app")
</script>

我们创建了一个名为my-component的组件，并在该组件上添加了ref属性，值为myComponentRef。然后，在父组件中，我们通过this.$refs.myComponentRef来访问这个组件实例，并调用组件中的方法someMethod()，以及访问组件的数据属性someData。

需要注意的是，使用ref属性时要注意避免在循环中使用，因为这可能会导致意外的行为。正确的做法是使用v-for指令来遍历数组，并为每个元素指定唯一的ref值。

好，那么到这里，这节课也就结束了，当然也表示我们基础课程学完了，后面我们将会继续深入学习vue方方面面的技能点直到能上手做项目。走这里我们目前只是掌握一些基础技能点，还不能干一番大事业。我们需要一步一个脚印夯实基础才能接受住后的项目实战挑战