如何将js对象和函数传递给Web组件 [英] How to pass js Object and functions to a web component

问题描述

大家好我是javaScript的初学者，目前正在研究JS Web组件，由于某些用例，我陷入了困境

Hi All I am a beginner in javaScript and currently exploring JS Web-component and I got stuck due to some use cases

1）我想传递JS对象到我的组件中，例如

1 ) I want to pass a JS Object into my component like

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

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

And require to use inside my component code Like

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

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

2 ) I also need to pass some functions or maybe call back functions like.

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

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

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

please try to add code snippet also in ans that will help me to learn more JS. Thanks

推荐答案

您应该使用Javascript传递大对象。

You should pass large object by Javascript.

通过自定义元素方法：

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

或设置属性：

comp.data = obj

这篇关于如何将js对象和函数传递给Web组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！