1. 属性

当我们在开发程序的时候，不可避免的要进行组件之间的通信。

父子组件传值：

• 父组件中引用并使用子组件，通过属性的方式将值传递给子组件
• 子组件声明父组件传递过来的属性，并使用
• 父组件传过来的值的优先级高于子组件本身定义的，相当于子组件定义接收参数如果带值的话是默认值，父组件不传则展示默认值，传则展示父组件传入的值

父组件:
<script>
import Header from "./components/Header.svelte";
let headerContent = "首页"
</script>
<main>
<Header headerContent={headerContent}/>
</main>
<style>
</style>
子组件：
<script>
export let headerContent = '不用'
</script>
<h1>
{headerContent}
</h1>

执行上述代码，在页面中展示的内容为’首页’，若<Header/> 不传参数，则展示’不用’

2. 属性传递

如果你的组件含有一个对象属性，可以利用...语法将他们传递到另一个组件上去，而不需要逐个指定。

父组件：
<script>
import Header from "./components/Header.svelte";
let headerContent = {
title: '首页',
desc: '首页描述信息',
version: '1.0'
}
</script>
<main>
<Header {...headerContent}/>
</main>
<style>
</style>
子组件：
<script>
</script>
<h1>
{$$props.title}
{$$props.version}
</h1>

可以通过$$props直接获取需要引用传递到组件中的所有参数，可以在子组件中不export的参数。不建议这样做，直接属性传递，export的那种比较好维护处理

不使用...传值要这样书写哦：
<Header {headerContent}/>
{$$props.headerContent.title}

使用…是将headerContent每一个键依次传入，所以$$props应该是{title: ‘’, version: ‘’}，不使用则是{headerContent: {title: ‘’, version: ‘’}}

官方文档
如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~

最后

以上就是开心睫毛膏为你收集整理的SveletJs学习——属性(组件传值)1. 属性2. 属性传递的全部内容，希望文章能够帮你解决SveletJs学习——属性(组件传值)1. 属性2. 属性传递所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。