Vue.js 组件双向属性绑定。。。三态复选框

我正在尝试构建一个三态复选框组件。 最初，复选框值为空，由一个不确定的复选框表示。 当用户单击不确定复选框时，该值变为true，然后单击false，然后再次单击null

到目前为止，这就是我所拥有的：

Vue.component（'checkbox'{
模板：“”，
道具：['CurrentState']，
挂载：函数（）{
this.currentSate=null；
此.$el.INDEMINATE=真
},
方法：{
更改：函数（）{
if（this.currentSate==null）{
this.currentSate=真；
此.$el.checked=true；
此.$el.INDEMINATE=假；
回来
}
if（this.currentSate==true）{
this.currentSate=false
此.$el.checked=false；
此.$el.INDEMINATE=假；
回来
}
if（this.currentSate==false）{
this.currentSate=null；
此.$el.undeterminate=true；
回来
}
此.emit（'input'，此.currentstate）；
}
}
});

chState={{chState}
当您遇到此错误时，简而言之，您需要发出所需的值，但让父级设置它，以便它通过属性向下流动

更多信息
您使用
@emit
向上发送事件，在您的情况下，父级会更改绑定到
:value
或
:currentstate
的属性，从而更新子级

v-model
的工作方式是输入子对象的变化，
它触发一个
@input
事件，父级收到它并修改绑定的
:value
，然后返回到子级

这看起来有点乏味，但最终它消除了一系列的设计问题

解决方案
因此，在您的情况下，不应该修改
currentSate
。只需
@emit
新值，并且不修改
当前状态
。让父级修改绑定到
：currentstate
的任何
数据，这将修改属性
currentstate

我建议您使用
value
而不是
currentSate
来遵循Vue惯例。如果您发出
输入
并接收
值
，
v型
将开箱即用

三态盒
您可以收听“单击”，然后打开属性“currentSate”的值。只需基于当前值发出下一个值。您仍然需要让父对象更新绑定值

onClick（值）{
开关（该电流状态）{
大小写空：此.$emit（'input'，true）；中断；
大小写true:this.$emit（'input'，false）；break；
大小写为false:this.$emit（'input'，null）；break；
}
}

以下是侦听事件并更新绑定属性的示例：



现在，如果您发出
input
并绑定到
：value
而不是
currentSate
，则可以执行以下操作：



v-model
在您使用将值作为
输入发出，并将属性作为
值接受的约定时起作用
会出现警告，因为您直接从子组件变异道具

v-model
无疑是一个不错的选择，但是状态管理可以用更优雅的方式处理

我建议在将复选框插入DOM时，使用自定义指令强制复选框的
不确定状态。你可以找到一个代码笔和一个工作的例子

简而言之，它将如下所示：


Vue.directive（'不确定'，（el，绑定）=>{
if（el.type&&el.type==“复选框”&&binding.value===null）{
el.不确定=真；
}
});
新Vue({
el:“#应用程序”，
数据：（）=>({
选中：空，
}),
方法：{
onInput（$事件）{
this.checked=this.checked==false？null:this.checked==true？false:true；
}
}
})

我是{{checked==null？'null'：checked}
没有一个答案是完整的
就是这样


Vue.component（'checkbox'{
模板：“”，
道具：['value']，
挂载：函数（）{
this.value=null；
此.$el.INDEMINATE=真
},
方法：{
更改：函数（）{
if（this.value==null）{
这是。$emit（'input'，true）；
回来
}
if（this.value==true）{
这是。$emit（'input'，false）；
回来
}
如果（this.value==false）{
此.$el.undeterminate=true；
此.$emit（'input'，null）；
回来
}
}
}
});
var myApp=新的Vue(
{
el:“#应用程序”，
数据：{
chState:null，
}
});

chState={{chState}
但我需要修改当前状态，以便知道下一次单击时分配给它的值。我将在解决方案中添加更多信息。这可以简化
onClick（）{This.$emit（'input'，This.currentState}}
我不再得到错误，但在父级上没有任何事情发生，你能发布一个完整的js/html示例吗？可能在JSFIDLE或类似的东西上？@boruchsipe我用逻辑更新了解决方案，以改变属性的支持值。在本例中，复选框在后续单击时不会返回到不确定状态。True@boruchsipeR