从方法内部获取轻元件组件类的定义:如何访问子组件的属性?我正在尝试获取/修改孩子的属性值。 例如
...
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);
}
答案 0 :(得分:1)
如果topics-unicode-tree-core
也是一个自定义元素,那么希望它也有一个属性设置器/获取器(这是lit-element的默认设置),因此很简单
let topicsTree = this.shadowRoot.getElementById("topics-tree");
topicsTree.querylimit = 5;
会成功的
如果没有,则可以直接设置修改属性。
topicsTree.setAttribute('querylimit', 5);
答案 1 :(得分:1)
以下是如何访问并可能修改子照明元素组件的属性的示例:
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);