Vue 3自定义元素,无法从vannilla js访问方法

wyyhbhjk  于 2023-06-06  发布在  Vue.js
关注(0)|答案(1)|浏览(155)

我用vue 3创建了一个自定义元素<ts-app>
发射事件工作正常,但我不知道如何从vanilla js调用方法。

customElements.whenDefined("ts-app").then((app) => {
            const el = document.querySelector("ts-app");

            // I want to call open inside webcomponent here 
            // tried el.open(), el.shadowRoot.open() both returns open is not defined
            

            el.addEventListener("updated", function (e) {
                //this is working fine
                console.log(e);
            });
        });

在我的组件里

methods: {
        open() {
            console.log('Open Called')
        },
}
nafvub8i

nafvub8i1#

您可以创建 prop :

const props = defineProps({
  isOpened: {
    type: Boolean,
    default: false,
  },
})

看看这个 prop :

watch(
  () => props.isOpened,
  (newValue) => {
    // open functionality here ;
  }
);

然后从vanilla js中设置这个prop:

el.setAttribute('is-opened', true)

相关问题