如何将js对象和函数传递给Web组件

Question

大家好我是javaScript的初学者，目前正在探索JS Web组件，我因一些用例而陷入困境

1）我想将JS对象传递给我的组件

<my-component data=obj ></my-component> 

并要求在我的组件代码中使用

connectedCallback () {
    console.log(this.data) // it should print {"name":"xyz" , "role" : "dev"}
} 

2）我还需要传递一些函数或者回调函数。

function myFunction(e){
   console.log(e)
}

<my-component click=myFunction ></my-component>

请尝试添加代码片段，这将有助于我了解更多JS。谢谢

Answer 1

你应该通过Javascript传递大对象。

通过自定义元素方法：

let comp = document.querySelector( 'my-component' )
comp.myMethod( obj )

或设置属性：

comp.data = obj

Answer 2

最好使用属性而不是属性传递复杂数据。

myEl.data = {a:1,b:'two'};

标准的on事件在自定义元素上工作正常：

function myFunction(e){
  alert(JSON.stringify(e.target.data));
  e.target.data = {a:1,b:"two"};
}

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this._data = 0;
    this.attachShadow({mode:'open'}).innerHTML="Click Me";
  }

  static get observedAttributes() {
    return ['data'];
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    if (oldVal !== newVal) {

    }
  }

  get data() {
    return this._data;
  }
  set data(newVal) {
    this._data = newVal;
  }
}

customElements.define('my-component', MyComponent);

<my-component onclick="myFunction(event)"></my-component>

如果您的组件调度自定义事件，则最好通过代码访问它：

function specialEventHandler(evt) {
  // do something
}

myEl.addEventListener('special-event;', specialEventHandler);

Answer 3

广告1）您需要使用JSON.stringify(obj) Ad 2）据我所知，所有属性都需要定义为字符串。您可以将全局和内部组件的函数传递给eval(fn)