1. 属性
当我们在开发程序的时候，不可避免的要进行组件之间的通信。
父子组件传值：
- 父组件中引用并使用子组件，通过属性的方式将值传递给子组件
- 子组件声明父组件传递过来的属性，并使用
- 父组件传过来的值的优先级高于子组件本身定义的，相当于子组件定义接收参数如果带值的话是默认值，父组件不传则展示默认值，传则展示父组件传入的值
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18父组件: <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. 属性传递
如果你的组件含有一个对象属性，可以利用...语法将他们传递到另一个组件上去，而不需要逐个指定。
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22父组件： <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的那种比较好维护处理
复制代码
1
2
3
4不使用...传值要这样书写哦： <Header {headerContent}/> {$$props.headerContent.title}
使用…是将headerContent每一个键依次传入，所以$$props应该是{title: ‘’, version: ‘’}，不使用则是{headerContent: {title: ‘’, version: ‘’}}
官方文档
如果有用，点个赞呗~
总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~
最后
以上就是开心睫毛膏最近收集整理的关于SveletJs学习——属性(组件传值)1. 属性2. 属性传递的全部内容，更多相关SveletJs学习——属性(组件传值)1.内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复