Question

我使用的第三方库使用具有getter / setter属性的类实例，并且我想使用VueJS组件控制这些属性。我不应该直接使用该实例作为组件状态（Evan你说它＆＃34; a rabbit hole＆＃34;），但如果我必须写自己的中间人将组件状态映射到类状态的代码，首先是反应数据绑定的重点是什么？

示例：

＆＃13;

// Toggle.js
var Toggle = Vue.component("Toggle", {
  template: '<label><input type="checkbox" v-model="visible">Click me!</label>',
  props: ["visible"]
});

// Third-party library
var Widget = function() {
  this._visible = true;
}
Widget.prototype = {
  get visible(){ return this._visible; },
  set visible(v){ this._visible = v; }
}

// app.js
var widgets = [new Widget(), new Widget(), new Widget()];
var v = new Vue({
  el: "#content",
  template: "<div><toggle v-for='(widget,idx) in widgets' :visible='widget.visible' :key='idx'></toggle></div>",
  data: {widgets},
  components: { Toggle }
});

＆＃13;

<script src="https://vuejs.org/js/vue.js"></script>

<div id="content"></div>

＆＃13;

上面的例子不是正确的方法，原因有两个：一，因为props是从父对象到子对象的单向绑定，而是两个，因为Widget实例是一个复杂的对象，不能被反应。

这种情况的优秀设计模式是什么？请记住，我无法控制Widget类，因此任何解决方案都必须在不改变其定义的情况下工作。

我应该如何使用Vue组件控制类实例属性的状态？

0 个答案: