我正在使用一个第三方库，该库使用带有 getter/setter 属性的类实例，并且我想使用 VueJS 组件来控制这些属性。我不应该直接使用实例作为组件状态（Evan You 说它是“一个兔子洞 https://github.com/vuejs/vue/issues/2718#issuecomment-214003100”），但是如果我必须编写自己的中间代码来将组件状态映射到类状态，那么反应式数据绑定首先有什么意义呢？
Example:
// 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 }
});
<script src="https://vuejs.org/js/vue.js"></script>
<div id="content"></div>
上面的示例不是执行此操作的正确方法，原因有两个：一是因为props意味着是从父级到子级的单向绑定，并且是两个，因为 Widget 实例是一个复杂的对象，无法进行响应式操作。
对于这个案例，什么是好的设计模式？请记住，我不控制 Widget 类，因此任何解决方案都必须在不更改其定义的情况下工作。
None
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
