首页 > 其他分享 >前端学习-vue学习012-插槽

前端学习-vue学习012-插槽

时间:2024-03-22 10:12:59浏览次数:37  
标签:vue 插槽 ChildComp 012 msg import

官方教程链接

父组件还可以通过插槽 (slots) 将模板片段传递给子组件:
App.vue

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

const msg = ref('from parent')
</script>

<template>
  <ChildComp>{{ msg }}</ChildComp>
</template>

ChildComp.vue,页面展示‘from parent’

<template>
  <slot>Fallback content</slot>
</template>

标签:vue,插槽,ChildComp,012,msg,import
From: https://www.cnblogs.com/ayubene/p/18088817

相关文章

  • ant design vue的expandedRowRender点击加载数据
    在AntDesignVue中,Table组件提供了一个expandedRowRender属性,可以用来自定义展开行后显示的内容。如果你想在点击展开行时加载数据,可以在expandedRowRender函数中实现异步数据加载。以下是一个简单的例子,展示了如何在点击展开行时加载数据:<template><a-table:columns="......
  • Vue3学习- Visual Studio Code安装
    开发Vue,需要一个好用的编辑器,可以让你事半功倍,本文介绍如何安装VisualStudioCode1.下载VisualStudioCodeVisualStudioCode下载地址:VisualStudioCode,点击打开后,选择DownloadforWindows 打开下载文件,点击我同意此协议,点击下一步保留默认选项,点击下一步,安装,最后......
  • 前端学习-vue视频学习010-生命周期
    尚硅谷视频教程组件的生命周期创建挂载更新销毁在特定的时期调用特定的函数,即生命周期vue2的生命周期4个周期,对应8个钩子(生命周期函数)创建:创建前、创建完毕挂载:挂载前、挂载完毕更新:更新前、更新完毕销毁:销毁前、销毁完毕<script>exportdefault{//eslint......
  • vue入门小案例(表单收集单页面)
    实例在Vue中创建一个表单收集页面,可以使用v-model来实现双向数据绑定,以便收集和处理用户输入的数据。以下是一个简单的示例,包含文本输入、选择框和单选按钮的表单页面<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"conten......
  • vue入门小案例(编写一个可编辑的表格)
    案例:要在Vue中创建一个可编辑的表格,你可以使用Vue的双向数据绑定功能。以下是一个简单的示例。首先,确保你已经在项目中引入了Vue。接下来,创建一个HTML文件,并在其中添加以下代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewpor......
  • 基于Spring Boot+Vue的学生选课系统
    末尾获取源码作者介绍:大家好,我是墨韵,本人4年开发经验,专注定制项目开发更多项目:CSDN主页YAML墨韵学如逆水行舟,不进则退。学习如赶路,不能慢一步。目录一、项目简二、开发技术与环境配置2.1SpringBoot框架2.2Java语言简介2.3Vue的介绍2.4mysql数据库介绍2.5B/S架......
  • 基于Spring Boot+Vue的社区医院管理系统
    末尾获取源码作者介绍:大家好,我是墨韵,本人4年开发经验,专注定制项目开发更多项目:CSDN主页YAML墨韵学如逆水行舟,不进则退。学习如赶路,不能慢一步。目录一、项目简介一、研究背景二、研究意义二、开发技术与环境配置2.1SpringBoot框架2.2Java语言简介2.3Vue的介绍2......
  • vue一些基础概念,核心理念,框架和库的区别,MVC和MVVM的区别,展示数据的几种方法、v-bind、
    1、什么是vue,核心理念,为什么学习vue1(单页面应用程序)用于构建用户界面的渐进式框架,采用自底向上增量开发的设计2数据驱动视图,组件化开发3轻量级框架、简单易学、虚拟的DOM、数据视图结构分离下面展示一些内联代码片。下面是vue的代码框架分为三部分:1.引入vue.js;2......
  • vue基础
    vue基础知识1、vue.js:是一套用于构建用户界面的渐进式框架。采用自底向上增量的开发顺序。Vue的视图层只关注图层,不仅易于上手,还便于与第三方库或既有项目整合。Vue是单页面应用程序。2、核心理念:数据驱动视图,组件化开发(重点)3、Vue.jsAnguar.jsReact.js是前端三大......
  • Vue3、typeit、vue3-markdown-it仿文心一言前端代码对接大模型
    相关依赖"typeit":"^8.8.3","vue3-markdown-it":"^1.0.10",示例效果核心代码<template> <a-modal class="modal-container" style="min-width:1400px;" :visible="modalState.visible"......