如何访问并可能修改 child lit-element 组件的属性?
How to access and possibly modify an attribute of a child lit-element component?
从 方法 内部 Lit-element 组件 class 定义:如何访问 [= child 组件的 15=] 属性 ?我正在尝试 get/modify child 的属性值。
例如
...
render() {
return html`
<div>
<label for="queryLimit">Query Limit</label>
<input type="number" name="queryLimit" id="queryLimit" value="7" min="1" max="21">
<button @click="${this.changeQueryLimit}">change attributes</button>
</div>
<topics-unicode-tree-core querylimit="9" id="topics-tree"></topics-tree>
`;
}
...
changeQueryLimit() {
let topicsTree = this.shadowRoot.getElementById("topics-tree");
// TODO: console.log(topicsTree.querylimit);
}
如果 topics-unicode-tree-core
也是一个自定义元素,那么希望它也有一个 属性 setter/getter(这是 lit-element 的默认值)所以一个简单的
let topicsTree = this.shadowRoot.getElementById("topics-tree");
topicsTree.querylimit = 5;
会成功的
如果没有可以直接设置修改属性
topicsTree.setAttribute('querylimit', 5);
这里有一个示例,说明如何访问并可能修改子 lit-element 组件的属性:
import { LitElement, html } from '@polymer/lit-element';
class MenuElement extends LitElement {
static get properties(){ return {
qlimit:{type:String}
}
}
constructor() {
super();
this.qlimit="9";
}
render() {
return html`
<div id="div">
<label for="queryLimit">Query Limit</label>
<input type="number" name="queryLimit" id="queryLimit" value="7" min="1" max="21">
<button @click="${this.changeQueryLimit}">change attributes</button>
</div>
<topics-unicode-tree-core .querylimit="${this.qlimit}" id="topics-tree"></topics-unicode-tree-core>
`;
}
changeQueryLimit() {
//let topicsTree = this.$.topicsTree;
console.log('-->', this.shadowRoot.querySelector("#topics-tree").querylimit );
this.qlimit="10"
setTimeout(()=>{
console.log('-->', this.shadowRoot.querySelector("#topics-tree").querylimit )},200)
}
}
customElements.define('menu-element', MenuElement);
从 方法 内部 Lit-element 组件 class 定义:如何访问 [= child 组件的 15=] 属性 ?我正在尝试 get/modify child 的属性值。 例如
...
render() {
return html`
<div>
<label for="queryLimit">Query Limit</label>
<input type="number" name="queryLimit" id="queryLimit" value="7" min="1" max="21">
<button @click="${this.changeQueryLimit}">change attributes</button>
</div>
<topics-unicode-tree-core querylimit="9" id="topics-tree"></topics-tree>
`;
}
...
changeQueryLimit() {
let topicsTree = this.shadowRoot.getElementById("topics-tree");
// TODO: console.log(topicsTree.querylimit);
}
如果 topics-unicode-tree-core
也是一个自定义元素,那么希望它也有一个 属性 setter/getter(这是 lit-element 的默认值)所以一个简单的
let topicsTree = this.shadowRoot.getElementById("topics-tree");
topicsTree.querylimit = 5;
会成功的
如果没有可以直接设置修改属性
topicsTree.setAttribute('querylimit', 5);
这里有一个示例,说明如何访问并可能修改子 lit-element 组件的属性:
import { LitElement, html } from '@polymer/lit-element';
class MenuElement extends LitElement {
static get properties(){ return {
qlimit:{type:String}
}
}
constructor() {
super();
this.qlimit="9";
}
render() {
return html`
<div id="div">
<label for="queryLimit">Query Limit</label>
<input type="number" name="queryLimit" id="queryLimit" value="7" min="1" max="21">
<button @click="${this.changeQueryLimit}">change attributes</button>
</div>
<topics-unicode-tree-core .querylimit="${this.qlimit}" id="topics-tree"></topics-unicode-tree-core>
`;
}
changeQueryLimit() {
//let topicsTree = this.$.topicsTree;
console.log('-->', this.shadowRoot.querySelector("#topics-tree").querylimit );
this.qlimit="10"
setTimeout(()=>{
console.log('-->', this.shadowRoot.querySelector("#topics-tree").querylimit )},200)
}
}
customElements.define('menu-element', MenuElement);