On gists

defineProps - Vue (and reactive behavior)

Popular ⭐ Vue.js

parent.vue Raw #

<script setup>
import  Child  from './Child.vue'
import { ref } from 'vue'

const test = ref('one')

setTimeout(() => {
  test.value = 'two'
}, 3000)

</script>

<template>
  <h1>Parent</h1>
  <Child :test="test"/>
</template>

child.vue Raw #

<script setup>

import { ref, watch, toRefs } from 'vue'

const props = defineProps({
  test: String
})

let refTest = ref(props.test)
const { test: testToRefs } = toRefs(props)

watch(() => props.test, (newValue) => {
  refTest.value = newValue
})

</script>

<template>
  <div>
    All ways how to have reactive props ...
    <hr />
    child: <br />
    <hr />
    test -> {{ test }} <br />
    testToRefs -> {{  testToRefs }} <br />
    $props.test -> {{ $props.test }} <br />
    refTest-> {{ refTest }} <br />
  </div>
</template>

<!-- 
after 3 seconds

test -> two
testToRefs -> two
$props.test -> two
refTest-> two

-->