使用点亮的逻辑部分上的串联数据
我一直在寻找有关可变箱的信息。问题是我不想在HTML渲染中使用这些变量，而是在组件逻辑中（我想获取一些数据）。我该如何声明？
constructor(){
super();
this.url = "https://....";
}
render() {
return html`
<parent-component .url ="${this.url}"></parent-component>
`;
儿童组成部分：
constructor() {
super();
fetch(this.url)
.then(response => response.json())
.then(data =>{this.ArrayData = data.results
this.requestUpdate()
})
}
非常感谢
I have been looking for information about variable binning. The problem is that I don't want to use those variables inside my HTML render, but in the component logic (i want to fetch some data). How do I declare it?
constructor(){
super();
this.url = "https://....";
}
render() {
return html`
<parent-component .url ="${this.url}"></parent-component>
`;
child component:
constructor() {
super();
fetch(this.url)
.then(response => response.json())
.then(data =>{this.ArrayData = data.results
this.requestUpdate()
})
}
Thank you very much
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
要绑定数据，请声明a 反应性属性对于可以触发反应性更新周期的属性更改时，重新渲染组件。
从您的示例中，我不确定何时要触发子组件中的获取。我假设您想用
this.url以属性绑定来获取数据一次。我在代码示例中看到的问题是
this.url将在子组件的构造函数中 ，因为外部元素需要渲染并设置属性<代码> .url 对孩子。将构造函数中的逻辑移至 > 生命周期回调应解决问题，因为this.url现在将定义。我在代码示例中包含的另一个更改是制作
this.arraydata一个反应性属性，允许删除this.requequestupdate。Minimal example of fix in the Lit游乐场。
To bind data, declare a reactive property for properties that can trigger the reactive update cycle when changed, re-rendering the component.
From your example I'm not exactly sure when you want to trigger the fetch in the child component. I'll assume you want to fetch the data once with
this.urlpassed from the parent as a property binding.The issue I see in the code sample is that
this.urlwill beundefinedin the constructor of the child component, as the outer element needs to render and set the property.urlon the child. Moving the logic in the constructor to thefirstUpdatedlifecycle callback should fix the issue, asthis.urlwill now be defined.An additional change I included in the code sample, is making
this.ArrayDataa reactive property, allowing the removal ofthis.requestUpdate.Minimal example of fix in the Lit Playground.