Advanced Patterns — Series 3

Preview — 3 of 10 questions

What values do binding.arg and binding.modifiers hold inside this directive's mounted hook?

javascript

<script setup>
const vHighlight = {
  mounted(el, binding) {
    el.style[binding.arg] = binding.value
    if (binding.modifiers.uppercase) {
      el.textContent = el.textContent.toUpperCase()
    }
  },
}
</script>

<template>
  <p v-highlight:background-color.uppercase="'yellow'">hello</p>
</template>

Abinding.arg is 'background-color' and binding.modifiers is { uppercase: true } — the directive's :argument and .modifier syntax map directly onto these two fields on the binding object

Bbinding.arg is 'yellow' and binding.modifiers is 'uppercase'

CCustom directives don't support arguments or modifiers — only built-in directives like v-model do

Dbinding.arg is undefined; arguments only work on components, not plain elements

What changes when isMobile becomes true?

javascript

<template>
  <Teleport to="#modal-root" :disabled="isMobile">
    <div class="dialog">Settings</div>
  </Teleport>
</template>

Adisabled has no effect on <Teleport>; only to matters

BWhen disabled is true, the content renders in its normal, in-place DOM position instead of being moved to the to target — letting the same template conditionally opt out of teleporting, e.g. rendering a dialog inline on small screens instead of as a portal

Cdisabled removes the content from the DOM entirely until it becomes false again

Ddisabled only affects styling — the content is still teleported either way

What can components access via inject('config') here, and where must they be for it to work?

javascript

// main.js
const app = createApp(App)
app.provide('config', { apiUrl: 'https://api.example.com' })
app.mount('#app')

AOnly App.vue's direct children can inject 'config'; grandchildren cannot

BNothing — provide/inject only works between components, app.provide is not a real API

CAny component anywhere in the app's component tree can inject('config'), no matter how deeply nested — app.provide is equivalent to providing a value from an invisible root ancestor above every component the app renders

DOnly components that are also registered globally with app.component can inject values provided at the app level

Answer all 10 questions (7 more), see explanations for every answer, and track your score.