Vue.js 观察vue js中值的属性更改（双向数据绑定）

我正在尝试进行双向数据绑定以观察DOM属性值

<template>
  <div>
    <annotations>

      <!-- Need to watch x value. <rect> wil be manipulated from <annotations> to hide complexity -->
      <rect :x="x" class="box" slot="annotation" y="10" width="100" height="100"></rect>

      <img src="./assets/logo.png" />
    </annotations>
  </div>
</template>
<script>
export default {
  components: {
    'annotations': () => import('./components/Annotator')
  },
  data () {
    return {
      x: 10
    }
  }
}
</script>

也尝试使用（希望它能发挥一些魔力），但仍然是一样的

<rect :x.sync="x" class="box" slot="annotation" y="10" width="100" height="100"></rect>

注意：

是

依赖于发出

update

事件的组件。普通SVG无法做到这一点。只能使用Vue组件

---

看起来您的

annotations

组件是SVG中修改

x

的组件。这就是您应该将

x

变量绑定到的内容，当它更改值时，组件应该发出事件。

组件

rect

在做什么？实际上

rect

不是组件，而是组件。我想使用

svg元素

在

img

上方绘制

rect

，并在

注释

组件内部操作

svg元素

。对于完整的代码，您可以单击沙盒按钮。我还想把它传递给事件发射器。然而，如果有许多元素（例如100个矩形、椭圆和/或画布），仍然可以观察父元素上单个xValue元素的变化吗？您必须在某个地方跟踪它们。您可能有一个数组。我不太清楚你的程序应该如何工作。

<rect :x.sync="x" class="box" slot="annotation" y="10" width="100" height="100"></rect>