Vue2中拿到组件的实例是通过子组件定义ref="xx",然后通过$refs.xx拿到该组件的属性和方法。

Vue3同样,只是写在了setup函数中

父组件

// 父组件 
<template>
  <Child ref="child" />
  <button @click="changeChildName">改变childName</button>
</template>

<script>
import { ref } from 'vue'
import Child from './Child'
export default {
  components: { Child },
  setup() {
    const child = ref(null)
    const changeChildName = () => {
      child.value.changeChildName()
    }
    return {
      child,
      changeChildName
    }
  }
}
</script>

子组件

<template>
  ChildName:{{ name }}
  <GrandSon ref="grandson" />
  <ul>
    <li
      v-for="(item, index) of student"
      :key="index"
      :ref="
        (el) => {
          list[index] = el
        }
      "
    >
      {{ item.id }}---{{ item.name }}
    </li>
  </ul>
</template>

<script>
import GrandSon from './GrandSon'
import { onMounted, reactive, ref } from 'vue'
export default {
  components: { GrandSon },
  setup() {
    const list = ref([])
    const name = ref('张三')
    const student = reactive([
      { id: 1, name: '小红' },
      { id: 2, name: '小黄' },
      { id: 3, name: '小紫' },
      { id: 4, name: '小绿' }
    ])
    const changeChildName = () => {
      name.value = '李四'
    }

    onMounted(() => console.log(list.value[1]))
    return { name, changeChildName, student, list }
  }
}
</script>
  • 父组件中先通过定义响应式的实例xx,置为null,然后return出
  • 通过xx.value来调用
  • 子组件中可以定义方法,父组件可以通过子组件的实例来调用该方法
  • 也可以拿到v-for下循环的子标签实例,需要使用函数型的 ref(3.0 提供的新功能)来自定义处理方式, :ref="(el)=>{if (el) list[index] = el" 这里的list也是需要在setup下提前定义空数组并return的

注:

只有子组件挂载到DOM时才能拿到子组件的实例,否则只能拿到null


爬。