对子组件执行Svelte函数
是指在Svelte框架中，通过调用子组件的函数来实现对子组件进行操作或传递数据。
Svelte是一种基于组件的前端框架，它允许开发者将界面划分为多个可重用的组件，并通过组件之间的通信来构建复杂的应用程序。在Svelte中，子组件是指被包含在父组件中的组件。
要对子组件执行Svelte函数，可以通过以下步骤实现：
- 在父组件中引入子组件：首先，在父组件的代码中引入子组件。可以使用Svelte的
import语句来导入子组件的代码文件。 - 在父组件中使用子组件：在父组件的代码中，使用子组件的标签来将子组件插入到父组件的模板中。可以通过在标签中添加属性来传递数据给子组件。
- 在子组件中定义函数：在子组件的代码中，可以定义需要执行的函数。这些函数可以用于处理传递给子组件的数据，或者执行其他操作。
- 在父组件中调用子组件的函数：在父组件的代码中，可以通过访问子组件的实例来调用子组件的函数。可以使用Svelte的
bind:this指令将子组件的实例绑定到父组件的变量上，然后通过该变量来调用子组件的函数。
通过对子组件执行Svelte函数，可以实现父子组件之间的数据传递和交互操作。这种方式可以提高代码的可维护性和重用性，使开发过程更加高效。
在腾讯云的云计算平台中，可以使用腾讯云的Serverless云函数（SCF）来实现对子组件执行Svelte函数的功能。SCF是一种无服务器计算服务，可以在云端运行代码，无需关心服务器的管理和维护。通过SCF，可以将Svelte组件的代码部署到云端，并通过API网关等服务来触发执行子组件的函数。
腾讯云Serverless云函数（SCF）产品介绍：https://cloud.tencent.com/product/scf
相关·内容
这可能就是Svelte.js的工作原理，但我很好奇我是不是做错了什么，或者是否有解决办法。 如果我设置了编译器选项customElement: true，则传递给组件的属性在该组件的<script>标记中不可用。我用的是带svelte装载机的webpack。下面是一个简单的例子： // index.html
<my-app foo="testing svelte"></my-app>
<script src="bundle.js"></script>
// script.js (bundled
浏览 37提问于2020-03-28得票数 3
回答已采纳
1回答
我正在试用Svelte (来自Vue3 3/类星体背景)，我很难在导出的辅助函数中使用localStorage。
如果我在src/libs.js中有以下代码
export const callZinc = () => {
console.log(`hello ${localStorage.getItem("login")`)
}
编译失败
localStorage is not defined
ReferenceError: localStorage is not defined
at Module.callZinc (/src/libs.js:4:53)
浏览 2提问于2022-06-18得票数 0
1回答
当Svelte组件中的生命周期函数(比如afterUpdate())被调用时。它会导致组件重命名吗？
例如
<script>
import { afterUpdate } from 'svelte';
afterUpdate(() => {
console.log('the component just updated');
});
</script>
这仅仅是一个组件更新，还是会发生重命名？
浏览 9提问于2022-04-12得票数 1
假设我有一个组件：
Page.svelte：
<script lang="ts">
const players: Player[] = getPlayersFromSomewhere()
</script>
{#each players || [] as player}
<Player {player} />
{/each}
和Player.svelte：
<script lang="ts">
export let player: Player;
async fu
浏览 4提问于2022-03-10得票数 1
回答已采纳
我不能从我的可写存储中读取所有数据：
Error: 'store' is not exported by src\stores.js, imported by src\components\Users.svelte
商店：
import {subscribe} from 'svelte/internal'
import {writable} from 'svelte/store'
export const fooStore = (key, initial) => {
const foo = localStorage.getItem(ke
浏览 0提问于2021-05-05得票数 0
我正在为学习的目的在Svelte开发一个小用户应用程序(我是Svelte的新手)。
在App.Svelte中，我循环遍历一组用户：
<script>
const apiURL = "https://randomuser.me/api/";
import { onMount } from "svelte";
import Search from './Search.svelte';
import User from './User.svelte';
let users = [];
let stringToMatch =
浏览 1提问于2020-10-06得票数 0
回答已采纳
3回答
我想知道如何从Svelte的函数中转发一个事件。
例如，我有一个App.svelte和一个Component.svelte文件。Component.svelte是一个按钮组件。我想处理on:单击这样的事件：
<script>
function handle(e){ /** Do things */ - /** Forward Event */ }
</script>
<button on:click={handle}/>
所以我也可以从App.svelte文件中获取事件
<script>
import Button from &#
浏览 1提问于2020-10-10得票数 0
回答已采纳
我试图在Svelte模板中使用包含减价的字符串，并使用作为Svelte组件的一部分，我在App.svelte中有以下代码
<script>
import { compile } from 'mdsvex';
import Counter from './lib/Counter.svelte'
const transformed_code = compile(`
# Hello world
This is a paragraph
<Counter />
`, {});
</script&
浏览 9提问于2022-08-17得票数 1
CMS返回带有自定义元素和各自属性的HTML。
<!-- index.html -->
<svelte-accordion props='{"toggleAll":true}'>
<svelte-accordion-item props='{"title":"Accordion item 1"}'>
<p>Content of the first accordion item</p>
</svelte-accordion-item&
浏览 4提问于2021-11-29得票数 1
2回答
我尝试从Svelte组件导入一个常量值，但rollup显示该组件不会导出此值。我做错了什么，或者这是一个汇总问题？ related REPL Component.svelte： <script>
export const answer = 42;
</script> App.svelte： <script>
import { answer } from './Component.svelte';
</script>
<h1>{answer}</h1> 导入枚举定义时也会出现同样的问题。
浏览 11提问于2020-12-26得票数 2
回答已采纳
我刚在svelte工作(3周)，如果我做错了什么就不要做。试图导出一个const以便在另一个组件中使用，vscode不报告任何错误，但是cmd中的rollupJs报告此错误.
好了！错误：“repos”不是由src\components\Request.svelte导出的，而是由src\components\List.svelte导入的
但是变量被很好地导出了( guees)。
这是Request.svelte
<script>
import {writable} from 'svelte/store'
let userName = ''
expor
浏览 1提问于2021-12-31得票数 0
我想把一个苗条的SPA搬到Sveltekit里。
在我的SPA中，通信模式就是我所称的“控制器组件”，它负责显示某些组件，监听它们的事件，并相应地更新应用程序。总的来说，它看起来像这样的REPL：
如您在本例中所看到的，这个序列非常简单: App状态1)应用程序显示CompA，CommonComp应用程序状态2) CompA在装入App 3应用程序之后触发doSomething函数，然后调用commonComp.setTitle并显示CompB代替CompA
在SvelteKit中，我很难做一些类似的事情，因为我不知道如何将数据从有槽的子组件传递到包含槽的组件，然后反过来。不管怎么说，这让我
浏览 8提问于2022-02-22得票数 2
回答已采纳
如果下面的文件test.svelte是/routes中的一个页面，它成功地调用load()，并在我通过访问它时使用它检索的JSON数组填充模板。如果我将该文件移动到/lib，并将其作为/routes/index.svelte中的组件导入，则当我转到时，该组件的load()方法永远不会运行。
test.svelte
<script context="module" lang="ts">
/**
* @type {import('@sveltejs/kit').Load}
*/
export async funct
浏览 4提问于2021-05-06得票数 11
回答已采纳
1回答
我有一个Error.svelte组件，它有一个包含可写存储的<script context="module">和一个导出的“addError”函数，用于更改存储内容。 Error.svelte <script context="module">
import {get, writable} from "svelte/store";
let errorStore = writable([])
export function addError(error) {
let error
浏览 50提问于2021-11-01得票数 0
回答已采纳
为了学习目的，我正在做一个小的Svelte应用程序(我是Svelte的新手)。
该应用程序在引导4表中显示来自randomuser.me API的用户的JSON。
我目前正在将应用程序转换为组件。
在App.svelte中，我有：
<script>
const apiURL = "https://randomuser.me/api/";
import { onMount } from "svelte";
import { fade, fly } from 'svelte/transition';
imp
浏览 5提问于2020-09-26得票数 0
回答已采纳
我在一个网站上工作，在那里使用Svelte和svelte-routing库。svelte-routing库有一个名为navigate(path)的方法。我只需单击一个按钮就可以使用此函数，它可以完美地工作。但在我的routeHandling.js文件中，它并没有像预期的那样工作。我可以看到它在浏览器中设置了url，但它停留在同一页面上，所以我必须按F5 (重新加载页面)来加载页面。 import {navigate} from "svelte-routing";
import * as axios from "axios";
export function
浏览 32提问于2021-09-16得票数 0
1回答
我试图在svelte组件中实现可重用的生命周期行为。其思想是在组件的生命周期方法出现时，实现一个模块来执行某些操作。然后，这个模块将很容易地导入到svelte组件中。我想到了以下几点：
假设我有几个组件，我想在onMount和onDestroy发生时记录一些内容，所以我可以在每个组件中重复下面的代码：
// Hello.svelte
<script>
import {onMount, onDestroy} from 'svelte';
onMount(()=>{
console.log('Mounted!')
});
onDestroy((
浏览 2提问于2019-06-17得票数 0
回答已采纳
3回答
如何将数据(例如: Navbar标题)传递给父元素中使用的组件？
<!-- _layout.svelte -->
<script>
import Nav from "../components/Nav.svelte";
let navTitle = "MyApp";
</script>
<Nav {navTitle}/>
<slot />
<!-- Nav.svelte -->
<script>
export let navTitle = "";
&
浏览 4提问于2020-08-30得票数 3
回答已采纳
我正在学习Svelte，我想在三个组件中使用来自一个JSON的数据。数据如下：
{
"stats": {
"currentYear": {
"total": 6,
"success": 6
},
"thirty": {
"total": 30,
"success": 28
},
"hundred": {
"total": 100,
浏览 2提问于2021-01-11得票数 1
回答已采纳
如果我在应用程序根部的组件中使用预加载函数，它为什么从来不运行？从，我认为这曾经是一个bug，但被修复了。
所以我很难理解为什么这是不能运行的：
_layout.svelte
import someComponent from 'someComponent.svelte';
<someComponent />
someComponent.svelte
<script context="module">
export async function preload({ params, query }) {
console.log
浏览 5提问于2020-10-23得票数 0
回答已采纳
2回答
在Svelte组件中放置元素意味着什么？例如：此代码：
const target = document.createElement('div');
// render the component in the new element
const sample = new Sample({ target });
就像这里，在给定的链接代码中，作者正在这样做：
这是干什么用的？是把Svelte组件放进div里吗？在Svelte组件的构造函数中放置元素是Svelte语法吗？
浏览 1提问于2019-09-12得票数 2
回答已采纳
假设外部组件包含内部组件，我们希望将来自内部组件的事件传播到外部组件。在不使用商店的情况下，有两种方法可以这样做：
方法1:使用dispatcher转发事件
Inner.svelte:使用Svelte的dispatcher来分发重新打包的原始事件版本：
<input type="text" on:input={callDispatcher} />
const dispatcher = createEventDispatcher();
function callDispatcher(e) {
dispatcher("mymsg", {
浏览 3提问于2020-05-03得票数 7
回答已采纳
在我看来(我知道我错了)，我在onMount生命周期函数( svelte )中所做的事情也可以在它之外完成。有什么不同吗？或者..。我错过了很大的分数。
<script>
import {onMount} from 'svelte'
function doSomething() {
// ......
// ..........
}
onMount(() => {
function doSomething() {
// ......
// ..........
}
})
<
浏览 1提问于2019-08-05得票数 2
回答已采纳
我在我的项目中使用了Svelte i18n，它在我的Svelte组件中工作得很好。
但是我有一些JS文件(例如常量)，我想使用i18n来翻译一些键，比如(在/services/constants.js中)：
import { _ } from 'svelte-i18n'
export const STATUS_OK = 1;
export const STATUS_PENDING = 2;
export const STATUS_ERROR = 3;
export const STATUS_INACTIVE = 4;
export const STATUS_PRICE_NOT
浏览 2提问于2021-09-08得票数 4
回答已采纳
1回答
我正在使用svelte与svelte-温泉路由器。
我有我的案子
<script>
import Component1 from './Component1.svelte'
import Component2 from './Component2.svelte'
</script>
{#if condition}
<Component1 {...props1} />
{:else}
<Component2 {...props2} />
{/if}
有什么更好的
浏览 2提问于2021-04-30得票数 0
回答已采纳
我试图循环一个数组来呈现具有type值的组件。
<script>
import One from './One.svelte';
import Two from './Two.svelte';
import Three from './Three.svelte';
const contents = [
{type: 'One'},
{type: 'Two'},
{type: 'Three'},
{type: 'One'}
]
</script&
浏览 2提问于2021-01-10得票数 3
回答已采纳
我是svelte的新手。我正在尝试将ESLint添加到我的svelte项目中。我的eslintrc.json：
{
"env": {
"es6": true,
"browser": true,
"node": true
},
"extends": [
"standard", "airbnb-base/legacy"
],
"plugins": [
"svelte3"
],
"o
浏览 3提问于2020-11-02得票数 3
为什么在从DOM中删除父组件之后，子方法Ondestroy()不调用呢？
App.svelte
<script>
import Child from "./child.svelte";
let compRef;
</script>
<button on:click={() => compRef.parentNode.removeChild(compRef)}>remove</button>
<div bind:this={compRef}>
<Child />
浏览 12提问于2022-08-30得票数 0
回答已采纳
1回答
我的preload函数似乎没有运行(我的pages变量不是作为导航组件的道具提供的)。在_layout.svelte中
<script>
import Nav from "../components/Nav.svelte";
</script>
<Nav />
<main>
<slot />
</main>
在Nav.svelte中
<script context="module">
export async function preload(page)
浏览 1提问于2020-12-01得票数 3
对于我的简单网站，我想在一个地方“收集”所有可配置的文本数据。
如何在存储中使用带有i18n的自定义数组？
这是错误：
'apps' is not exported by src\config\contents.svelte, imported by src\routes\index.svelte
contents.svelte
<script>
import { readable } from 'svelte/store';
import { _ } from "svelte-i18n";
let myapps = [
浏览 3提问于2021-03-04得票数 1
关于TypeScript中的类型，我遇到了这个问题:我正在为d3可视化的x轴创建一个svelte组件，其中我将xScale作为属性从父组件中传递给
<XAix {xScale}/>
在父元素(其中定义了xScale )中，TypeScript根据xScale的初始化为xScale分配一个类型，该类型看起来类似于
const xScale = d3.scaleBand().domain([/*string array*/]).range([/*numeric array*/]).padding();
在XAxis.svelte中，我根据我对xScale的定义手动注释xScale支柱。
浏览 9提问于2021-12-22得票数 1
我有一个问题:在Main.svelte组件中，我有数组footerItems：
<script>
let footerItems = [
{
'left' : [
{
'id' : 'item #1',
'value' : true
},
{
'id' : 'item#2',
'value' : true
}
],
'right' : [
{
'id&#
浏览 2提问于2021-10-22得票数 0
2回答
我的朋友使用打字稿和Svelte制作网络应用程序。我问他如何选择什么东西应该是类型记录文件，而什么时候应该是Svelte文件；他说，“在一个svelte文件中，它是组件的每个实例的代码”，而类型记录是“一个常规的file...global，每个应用程序一个。”
这对我来说是合乎逻辑的，但我仍然无法理解我什么时候应该使用哪一种。是否可以使用以下方法制作相同的web应用程序：
只输入文本文件，只显示Svelte文件，是这两种文件的混合？
如果是的话，那为什么备选方案3更优越呢？如果没有，哪些选项是可能的，哪些选项是不可能的，为什么？最好放一放，Svelte文件不能做的类型记录文件可以做什么(如果有
浏览 1提问于2021-11-29得票数 0
回答已采纳
我正在努力理解如何与Svelte组件进行通信。在我的应用程序中，我创建了两个组件。在一个Antescript.svelte中，我使用bind与App.svelte通信；在另一个Postscript.svelte中，我使用调度进行通信。
一种方法比另一种更好吗？
我可能会遇到使用方法而不是其他方法的问题吗？
调度方法当然需要更多的编码，这是一个问题吗？
App.svelte
<h1>{antescript} {junction} {postscript}</h1>
<div>
<AnteScript bind:antescript={antes
浏览 9提问于2022-04-13得票数 1
回答已采纳
2回答
我有一个Svelte & Sapper应用程序，在该应用程序中，我使用Svelte可写存储来设置一个带有初始空字符串值的变量：
import { writable } from 'svelte/store';
export let dbLeaveYear = writable('');
在我的Index.svelte文件中，我导入了这个变量，然后计算出这个变量的值并对其进行设置(如果与此相关，我将在‘Index.svelte’的onMount函数中这样做)：
<script>
import {dbLeaveYear} from "
浏览 3提问于2020-04-12得票数 0
回答已采纳
2回答
我想用Svelte中的switch case语句有条件地呈现组件，如下所示：
// index.svelte
<script>
import TextContent from './components/text-content.svelte'
import { someData } from './api/some-data.js'
const ContentSwitch = (data) => {
switch (data._type) {
case 'block':
浏览 4提问于2021-10-25得票数 3
CompOne如何在CompTwo中运行“测试”函数？
CompOne.svelte
<script>
import {test} from './CompTwo.svelte'
</script>
<!-- Some style and HTML tags for this component -->
CompTwo.svelte
<script>
export const test = () => { console.log('testing function') }
</script&
浏览 3提问于2019-11-04得票数 3
1回答
目前正在制作google扩展来可视化svelte组件，这将只用于开发模式。目前，我正在通过在我的内容脚本上使用const svelteComponets = document.querySelectorAll(`[class^="svelte"]`);来获取所有svelte组件，但是它正在抓取每个svelte元素。只获取组件的一些方法是什么？
浏览 9提问于2022-04-11得票数 0
我是svelte的新手，对于我的用例，我想将svelte应用程序导出为一个bundle.js，它公开了一个可以接受2个参数的函数，比如说startApp(positionInject, appConfiguration) (positionInject是应用程序注入位置，例如：.app，appConfiguration是应用程序开始渲染的初始配置)，基于这些参数svelte应用程序开始渲染。 我想知道，这在svelte是可能的吗？ 感谢任何人的帮助。
浏览 12提问于2019-12-08得票数 2
回答已采纳
是否可以创建组件并以编程方式将事件侦听器附加到组件上？
我知道，这对于使用<svelte:component/>的道具来说是很容易的，因为它可以通过{ ...props }进行传播。我想知道是否可以实现类似的东西来附加事件侦听器。
例如，在下面的示例中，我希望以编程方式将on:message附加到A，将on:count附加到B
<!-- App.svelte -->
<script>
import A from './A.svelte';
import B from './B.svelte';
let
浏览 4提问于2020-02-14得票数 6
回答已采纳
我正在创建vs代码扩展使用svelte。我跟随了解了一些关于svelte的基本知识。我目前被错误的Uncaught ReferenceError: require$$0 is not defined困住了。当我导入"project"/out/compiled文件夹并使用这个fs读取本地机器中的文件时，这个错误显示在一个自动创建的文件中，这个文件名为sidebar.js (在import * as fs from "fs";文件夹中创建)。下面是这个项目的文件结构-
当我试图在Sidebar.svelte中导入这个fs (下面的完整代码)时，我的npm
浏览 2提问于2021-08-03得票数 0
1回答
执行两个子组件之间的函数
、、、
我正在用Svelte做一个电子项目。我对斯维特比较陌生。所以问题是，我有一个名为MainContent.svelte的父组件和两个子组件editor.svelte和preview.svelte。编辑器和预览都放在MainContent组件中。我想要做的是，当编辑器的内容被更改时，我想更新预览窗格以反映这些更改。我以前使用Vanilla JavaScript做过同样的项目，但考虑使用Svelte，因为它更容易管理项目。
有一个函数侦听编辑器窗格中的任何更改，以及另一个要更新预览窗格的函数。但是，我无法理解的是，当编辑器的内容发生变化时，如何调用函数来更新预览。任何帮助都将不胜感激。
浏览 12提问于2022-12-02得票数 0
我有一个反应应用程序，我正在检查移动到svelte的可行性。
我不直接呈现给页面，而是创建包，包具有导出方法，它可以帮助谁调用API函数。
例：-
const render: Render = (containerId, options) => {
const container = document.getElementById(containerId)
ReactModal.setAppElement(container!)
const root = createRoot(container!)
root.render(
<StrictMode>{
浏览 6提问于2022-07-27得票数 0
回答已采纳
1回答
我希望从Svelte组件中公开一个方法，以便组件的使用者可以调用它。
假设我这里有一个简单的Svelte web组件：
<script>
export function someMethod() {
console.log("I was called");
}
</script>
<svelte:options tag="svelte-div" />
<style>
div {
background: #ff3e00;
}
</style>
浏览 2提问于2022-05-20得票数 0
1回答
你好，我需要你的帮助，因为我在我的svelte应用程序中使用了模式，但我需要将参数传递给模式组件，以选择我在其中编写的内容。但是在Modal的open()函数中，我们只需要给出我们导入的组件，所以我不知道如何传递参数。
下面是我的一些代码：
import { getContext } from 'svelte';
import ModalContent from './ModalContent.svelte';
export let title;
const { open } = getContext('simple-modal');
浏览 17提问于2021-05-24得票数 0
2回答
我的Modal.svelte文件中有以下内容：
<script>
import Modal from "svelte-simple-modal";
import { modalState } from "$lib/stores";
const imports = {
Person: () => import("./modals/Person.svelte")
};
</script>
<Modal>
{#if $modalState.open}
{#await im
浏览 13提问于2022-11-13得票数 0
回答已采纳
2回答
我有一个svelte商店，它有以下代码
import { writable } from "svelte/store";
import { onMount, onDestroy } from "svelte";
export const modalStore = () => {
const { subscribe, update } = writable({
showModal: false,
});
onMount(() => {
window.addEventListener("
浏览 11提问于2022-10-26得票数 0
回答已采纳
2回答
我正在尝试编写一个Svelte组件，在指定的时间内隐藏它的插槽。
例如，下一行应在3秒内隐藏段落
<Delayed mili_time={3000}> <p>some text</p> <Delayed>
我的尝试不起作用，并且没有显示任何内容(另外，虽然没有出现错误，但仍显示了日志)我希望得到一些帮助、提示或指导。
尝试：
<script>
import { onMount} from "svelte";
export let mili_time = 500;
let shown = false;
浏览 0提问于2021-04-08得票数 0
1回答
我试图在SvelteKit中创建一个动态更新的导航条，并相应地格式化当前打开的部分。我试图根据路径的第一部分来标识该页，如下所示：
__layout.svelte
<script context="module">
export const load = ({ page }) => {
return {
props: {
currentSection: `${page.path}`.split('/')[0],
sections: [
浏览 3提问于2021-09-05得票数 3
回答已采纳
使用svelte文档中的onMount照片示例，我可以使用自己的rest (还有另一个待做的.)显示数据。我改变了它，把照片html放在一个单独的组件中，它就能工作了。这是App.svelte
<script>
import { onMount } from 'svelte'
import Photos from './Photos.svelte'
let photos = []
onMount(async () => {
con
浏览 0提问于2021-04-29得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
