javascript - 如何将 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>

请尝试在 ans 中添加代码片段，这将帮助我学习更多 JS。谢谢

Answer 1

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

通过自定义元素方法:

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

或设置属性:

comp.data = obj