https://github.com/dan-almenar/vue-slots-example
Guide to Vue slots for exchanging data and functionality between parent and child components
https://github.com/dan-almenar/vue-slots-example
slots tutorial vue vue3
Last synced: 2 months ago
JSON representation
Guide to Vue slots for exchanging data and functionality between parent and child components
- Host: GitHub
- URL: https://github.com/dan-almenar/vue-slots-example
- Owner: dan-almenar
- Created: 2022-03-04T14:32:13.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-03-06T12:34:20.000Z (about 3 years ago)
- Last Synced: 2025-01-16T03:16:31.125Z (4 months ago)
- Topics: slots, tutorial, vue, vue3
- Language: Vue
- Homepage:
- Size: 108 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-slots-example
## by [Dan Almenar](https://danielalmenar.com)
The sole purpose of this mini app is to showcase **possible uses for the Vue \ tag**, not only to add HTML elements to the child component directly from the parent's component \ tag, but also to embed other components, or to retrieve data and even functions (methods) from the child component and use them directly on the parent. In no way the components functionality is design as they would in a real project.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```