时间戳

首页 > 解决方案 > Web 组件的 HTML 属性更改未反映在 Vue 组件中

javascript - Web 组件的 HTML 属性更改未反映在 Vue 组件中

问题描述

我面临以下问题。

我有一个纯 Web 组件：

<my-web-comp options='["op1", "op2"]' active-option="op2"></my-web-comp>

这呈现为两个选项卡，默认情况下选择第二个选项卡。当您单击另一个时，active-optionHTML 属性更改为op1，如果您打开 DevTools，您实际上可以看到 DOM 中的属性正在更改。

但是，我无法检测到使用 Web 组件的 Vue 组件的变化。我有：

<template>
    <div>
       <my-web-comp :options="options" :active-option="activeOption"></my-web-comp> 
    </div>
</template>

<script>
   export default {
  name: 'MyVueComponent',
  data() {
    return {
      options: '["op1", "op2"]',
      activeOption: "op2"
    }
  },
  computed: {
    testVar() {
      console.log("activeOption", this.activeOption) <--------- THIS LINE
    },
  }
}
</script>

标记的行仅在第一次加载 Vue 组件时触发（打印“op2”）。之后，testVar再也不会被修改，不介意我单击另一个选项卡并且在控制台中看不到任何内容。

我能错过什么？我认为这可能与 Vue 反应系统有关，但不知道是什么。

标签： javascriptvue.jsweb-componentvue-reactivity

解决方案

发生这种情况是因为您的 Web 组件改变了副本而不是该变量的引用（由您的 Web 组件创建的副本也不是反应式的）。有两种方法可以改变这种情况：

  • 您可以修改您的 Web 组件以使用 getter 和 setter 来更改此变量的值
  • 您可以使用MutationObserver. 检测 Web 组件中的更改。此方法不需要更改此 Web 组件

如果您选择方法，MutationObserver则在 vue mountedlife-cycle-hook中创建此观察者

推荐阅读