4 svelte 组件之间传值(属性)

官方网站中介绍到:在任何实际的应用程序中,都需要将数据从一个组件向下传递给它的子组件。为此,我们需要声明属性,通常简称为“props”。在Svelte中,我们使用export关键字来完成此操作。

1 传值

app.svelte:

<script>import Nested from './Nested.svelte';
</script><Nested answer={42}/>

此处将answer 属性传入  在子组件中需要接收。

Nested.svelte

<script>export let answer;
</script><p>The answer is {answer}</p>

子组件接收父组件传入进的值并进行回显

此处无异于Vue中的使用props父子组件传值.

2 默认值

Nested.svelte

<script>export let answer = 'a mystery';
</script>

app.svelte 中引入的时候不传值 会使用默认值

<script>import Nested from './Nested.svelte';
</script><Nested/>

3 对象属性传递

可以利用...语法将它们传播到一个组件上,而不用逐一指定:

app.svelte

<script>import Info from './Info.svelte';const pkg = {name: 'svelte',version: 3,speed: 'blazing',website: 'https://svelte.dev'};
</script><Info {...pkg}/>

Info.svelte

<script>export let name;export let version;export let speed;export let website;
</script><p>软件名{name}下载速度{speed} 版本{version}官网{website}
</p>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/154158.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webpack配置全局scss

webpack配置全局scss 效果&#xff1a;a.vue使用index.scss中定义的$mainWidth就无需 import "xxxxxxx/index.scss"文件 src/assets/styles/index.scss $mainWidth: 1280px; $red: red src/views/a.vue .aaa {color: $red; } vue.config.js module.exports {…

Ajax技术

目录 一.Ajax简介 1.特点 2.发送请求的方式 3.简介 二.Ajax引入 1.案例 后端&#xff1a; html前端&#xff1a; 2.小结 &#xff08;1&#xff09;基本语法 &#xff08;2&#xff09;注意 &#xff08;3&#xff09;HttpResponse解决方式 一.Ajax简介 1.特点 异…

【开源】基于Vue和SpringBoot的微信小程序的音乐平台

项目编号&#xff1a; S 055 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S055&#xff0c;文末获取源码。} 项目编号&#xff1a;S055&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示 四、核心代码4.1 查询单首…

Oracle(2-4)Naming Method Configuration

文章目录 一、基础知识1、OV of Naming Methods 命名方法的OV2、Five Key Parameters 连接数据库的五个关键参数 二、基础操作1、tnsnames.ora网络名配置 Naming Method Configuration 数据库网络命名配置 目标1&#xff1a; 描述主机命名和本地服务名称解析之间的区别使用Orac…

Java-super

【1】super:指的是&#xff1a; 父类的 【2】super可以修饰属性&#xff0c;可以修饰方法&#xff1b; 在子类的方法中&#xff0c;可以通过 super.属性 super.方法 的方式&#xff0c;显示的去调用父类提供的属性&#xff0c;方法。在通常情况下&#xff0c;super.可以省…

R语言——taxize(第三部分)

taxize&#xff08;第三部分&#xff09; 3.39. get_wiki&#xff08;获取维基分类群的页面名称&#xff09;3.40. get_wormsid&#xff08;获取分类群名称的Worms ID&#xff09;3.41. gni_details&#xff08;使用Global Names Index搜索分类学名称详情&#xff09;3.42. gni…

如何利用 AI 写一本书并实现被动收入

如何每个月写一本能赚 5000 美元的书&#xff1f;不少人不知道如何在一周内写作和出版一本书 这里有个教程教你如何利用 AI 写一本书并实现被动收入 [收藏起来以备后用] 推出书友智能写作工具&#xff1a;Bookwiz 不用花几年时间独自写作一本小说&#xff0c;人工智能可以作…

vsto word 获取目录起始页和结束页,如目录起始位置为2、结束位置为3,返回2和3

using Word Microsoft.Office.Interop.Word;namespace VstoWordExample {class Program{static void Main(string[] args){// 请确保你的项目引用了 Microsoft.Office.Interop.Word// 创建 Word 应用程序对象Word.Application wordApp new Word.Application();// 打开文档Wor…

使用activiti部署提示不是 ‘NCName‘ 的有效值

排查发现是整个流程图的&#xff0c;流程名称没有填写 修改之后就可以了

Taro编译警告解决方案:Error: chunk common [mini-css-extract-plugin]

文章目录 1. 背景2. 问题分析3. 解决方案3.1 更新 Taro 版本3.2 更新相关依赖3.3 调整 webpack 配置3.4 检查依赖版本 4. 拓展与分析4.1 拓展4.2 避免不必要的依赖4.3 查阅 Taro GitHub 仓库 5. 总结 &#x1f389;欢迎来到Java学习路线专栏~Taro编译警告解决方案&#xff1a;E…

windows如何查看自己的ip地址

windows如何查看自己的ip地址 1.打开控制面板 2.进入网络和internet 3.进入网络共享中心 4.点击以太网进入网络详情页&#xff0c;或邮件已连接的网络&#xff0c;点击属性 5.查看ipv4地址就是当前机器ip

美容仪器经营小程序商城的作用如何

美容仪器可以包含剃须刀、微针仪、微晶笔等&#xff0c;除了美容美业机构需要外&#xff0c;在家庭中也有不小的需求&#xff0c;对产品经营商家来说除了满足客户线下订购的需求外&#xff0c;还需要线上拓展更广的客群及多场景客户在线消费。 入驻第三方平台是商家们首先考虑…

大数据基础设施搭建 - Kafka(with ZooKeeper)

文章目录 一、简介二、单机部署2.1 上传压缩包2.2 解压压缩包2.3 修改配置文件&#xff08;1&#xff09;配置zookeeper地址&#xff08;2&#xff09;修改kafka运行日志(数据)存储路径 2.4 配置环境变量2.5 启动/关闭2.6 测试&#xff08;1&#xff09;查看当前服务器中的所有…

做外贸要学会分析客户情况

最近在某产品的专业群里询问一款产品&#xff0c;看谁可以做&#xff0c;然后很快就有一个自称是工厂的人加上了我。因为自己本身并不懂这个产品&#xff0c;很多他们发的问题自己都答不上来。我就如实告诉他自己是个新手&#xff0c;可以把你们现在能做的&#xff0c;或者已经…

家庭教育专家:如何创建家庭自主学习环境?

经常听到一些父母这样抱怨&#xff1a;“明明和孩子说好就看20分钟电视&#xff0c;结果到了时间&#xff0c;他死活都不肯关。”“作业还没完成的情况下&#xff0c;孩子还一直抱着手机或者电子产品玩游戏。到了约定时间也不撒手&#xff0c;一直跟你讨价还价。” 其实&#…

最前端|低代码平台轻松设计可视化图表【内含网站资源】

在前端设计中&#xff0c;我们经常需要使用可视化图表来呈现数据和信息。然而&#xff0c;每次都要自己从头开始设计图表未免太过繁琐。为了解决这个问题&#xff0c;我们调研了low code平台上的可视化图表功能。 本篇文章为大家带来以下问题的解答&#xff1a; &#xff08;1&…

JS,jQuery常用语法记录

JS&#xff0c;jQuery常用语法记录 JS常用语法: 1.操作剪切板 [可能无法在某些浏览器中正常工作] document.execCommand("copy")/document.execCommand("cut")// 复制链接function doCopyLink(id){$("#hiddenUrl").val("/article/viewArti…

接口测试需要验证数据库么?

有的接口会返回很多数据&#xff0c;有的接口可能就返回一个状态码及success之类的消息&#xff0c;这些需要验证数据库么&#xff1f;现在在写一个测试框架&#xff0c;配置接口参数和预期返回值&#xff0c;生成xml文件管理用例&#xff0c;用一个比较方法对预期和返回作比较…

C语言冒泡排序

小到大 #include <stdio.h> #include <stdlib.h>// 冒泡排序 从小到大 void max1() {int a[8] { 2,1,6,3,4,9,8,7 };printf("排序前是&#xff1a;\n");for (int i 0; i < sizeof(a) / sizeof(int); i){printf("%d ", a[i]);}printf(&qu…

17.Oracle11g的PL/SQL基础

Oracle11g的PL/SQL基础 一、PL/SQL的体系1、什么是PL/SQL2、PL/SQL 的优缺点2.1 PL/SQL的优点2.2 PL/SQL的缺点 二、PL/SQL的语法1、PL/SQL代码结构&#xff08;块&#xff09;2、PL/SQL基本语法2.1 变量声明2.2 流程控制语法 三、oracle的动态SQL 一、PL/SQL的体系 1、什么是P…