vuejs / rfcs

RFCs for substantial changes / feature additions to Vue core
4.87k stars 546 forks source link

If child-component is a <script setup> style component,ref(null) can't get Refs #318

Closed Darma1106 closed 3 years ago

Darma1106 commented 3 years ago

normalChild.vue

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const name = ref('normal-child')
    function nameChange() {
      name.value += '-change'
    }
    return { name, nameChange }
  }
})
</script>

sugarChild.vue

<script setup lang="ts">
ref: name = 'sugar-child'
function nameChange() {
  name += '-change'
}
</script>

index.vue

<template>
  <NormalChild ref="NormalChildRef" />
  <SugarChild ref="SugarChildRef" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import NormalChild from './normalChild.vue'
import SugarChild from './sugarChild.vue'

// const NormalChildRef = ref(null)
ref: NormalChildRef = null

const SugarChildRef = ref(null)
// ref: SugarChildRef = null

onMounted(() => {
  console.log('NormalChildRef', NormalChildRef)  // => child-ref
  console.log('SugarChildRef', SugarChildRef)  // => {}  a empty object
})
</script>

if child-component is a Githubissues.

  • Githubissues is a development platform for aggregating issues.