Vue3 Web 组件设置属性答案

【问题标题】：Vue3 web component set attributeVue3 Web 组件设置属性
【发布时间】：2022-12-28 22:01:52
【问题描述】：

我使用 Vite 和 Vue3 创建了独立的 Web 组件来替换旧的 jQuery 库。

在 html 中呈现时，它看起来像：

<custom-datepicker id="deliveryTime">
  #shadow-root
  <div>...actual component...</div>
</custom-datepicker>

当用户选择日期时，如果我可以将属性 value 设置为此元素，那将是完美的，例如：

<custom-datepicker value="selected value HERE" ...

因此表单可以通过它的 id 从元素中使用这个值。

问题是我设法实现这一目标的唯一方法是从我的 Web 组件发出事件 (selected) 并监听该事件，因此表单可以使用值，例如：

const datepicker = document.querySelector('#deliveryTime');
const dateSelected = (e) => {
  datepicker.value = e.detail.val;
}
window.addEventListener('selected', dateSelected);

如果我在 web 组件中设置 value 属性，应用程序的其余部分（Apache Velocity 模板）将无法访问它，因为它位于 shadow-root 中：

<custom-datepicker id="deliveryTime">
  #shadow-root
  <div value="selected value is sadly HERE">...actual component...</div>
</custom-datepicker>

是否有可能从 Web 组件内部实现这一点（这样我就可以省略监听器）？

【问题讨论】：

标签： javascript vue.js vuejs3 web-component

【解决方案1】：

如果您访问链接到您的 shadowhost 的 HTMLElement 然后在其上使用“setAttribute”函数会怎样？假设您可以使用“this”访问组件内的 shadowRoot，我认为类似的方法可以解决问题（https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/host）：

const shadowHost = this.shadowRoot.host; // The HTMLElement linked to <custom-datepicker />
shadowHost.setAttribute("value", someValueOfYourChoice);

【讨论】：

【解决方案2】：

我找到了解决方案，也许不是最干净的解决方案，但它有效:)

在我的网络组件中，选择了已安装的钩子组件：

const dp = ref(null)
onMounted(() => {
  dp.value = document.querySelector("#deliveryTime");
})

选择日期后，不只是发出设置属性：

dp.value.setAttribute('value', value)

【讨论】：