Vue3 web 組件設置屬性

Question

我用 Vite 和 Vue3 創建了獨立的 web 組件來替換舊的 jQuery 庫。

在 html 中呈現時，它看起來像這樣：

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

當用戶 select 約會時，如果我可以為此元素設置屬性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 組件中設置值屬性，應用程序（Apache Velocity 模板）的 rest 無法訪問它，因為它位於影子根中：

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

是否有可能從 web 組件內部實現這一點（這樣我就可以省略監聽器）？

Answer 1

如果您訪問鏈接到您的 shadowhost 的 HTMLElement，然后在其上使用“setAttribute”function 會怎么樣？ 假設您可以使用“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);

Answer 2

我找到了解決方案，也許不是最干凈的解決方案，但它有效:)

在我的網絡組件中，選擇了已安裝的鈎子組件：

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

選擇日期后，不只是發出設置屬性：

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