👉🏻 Create 3D scenes with Vue components and Three.js.
🔥 Vue Tip: Simpler Two-Way Binding in Vue With defineModel
v-modelv-model is a powerful feature in Vue that allows you to create two-way data bindings on your components. However, defining the props and emits in every component can be a bit verbose.
Since Vue 3.4 you can simplify two-way binding in Vue with the defineModeldefineModel compiler-macro, which is now the recommended way to define v-modelv-model bindings.
When you create a component that uses v-modelv-model, you need to define a prop and an emit for the value. For example, if you have a component that uses v-modelv-model to bind to a value prop, you would need to define the following:
defineModel is a new script setupscript setup macro that aims to simplify the implementation of components that support v-modelv-model. It automatically defines the modelValue prop and the update:modelValue emit for you.
Let's rewrite the above example using defineModeldefineModel:
1<script setup lang="ts">2const model = defineModel()3</script>45<template>6 <input v-model="model">7</template>8
I love this simple and clean syntax. It makes the code much easier to read and write.
My blog post contains additional information about multiple v-modelv-model bindings, modifiers and typing.
👉🏻 Learn how they optimize web performance by eliminating client-side rendering and reducing hydration, a feature inspired by React's Server Components.
👉🏻 Quill is a rich text editor that has official TypeScript support, support for multiple editors on the same page with different configurations, auto-scrolling container detection, a smoother editing experience, and more.
😂 Fun
Comments? Join the discussion about this issue in our Discord community.
Weekly Vue News #194 Reactive Time Ago View online Hi 👋 I'm on vacation this week, so no special news from my side — just some fresh Vue & Nuxt content for you! Enjoy this issue and have a lovely week ☀️ Vue 📕 Optimizing heavy operations in Vue with Web Worke...
Read this on my blog We made it to 200! Thanks for reading and supporting me over the last few years, it means a lot to me. Tomorrow is the last day of the Composable Design Patterns course launch and the 35% off discount. If you were hoping to pick it up, don't forget to check it out! As always, I've got some tips and links for you, and a new podcast episode. Enjoy, and have a great week! — Michael 🔥 Default Content with Slots You can provide fallback content for a slot, in case no content is provided: < !-- Child.vue --> < template > < div > < slot > Hey! You forgot to put something in the slot! < / slot > < / div > < / template > This content can be anything, even a whole complex component that provides default behaviour: < !-- Child.vue --> < template > < div > < slot name = "search" > < !-- Can...
评论
发表评论