Vue中使用绑定属性的.sync修饰符

在Vue中使用.sync修饰符

 <table-case
   :case-list.sync="solutionInfo.caseListJson"
  />

如上面代码中的.sync修饰符意为在子组件tableCase中想要改变父组件中的值，其实是一个语法糖
子组件改变父组件中的值在Vue中是不提倡的，或者说是不允许的，因此我们如果想改变父组件中的值，那么我们必须使用this.$emit("eventHandler",要传的值)，然后再父组件中进行监听eventHandler事件然后绑定回调，如下：

<table-case
   :case-list="solutionInfo.caseListJson"
   @eventHandler="事件触发时候的回调"
  />

我们可以在父组件的回调中来改变传入到子组件中的值，在该例子中也就是case-list的值，可以看出来非常繁琐。

因此Vue提供了一个语法糖，来为我们做这种事情提供能力，语法糖就是.sync修饰符

 <table-case
   :case-list.sync="solutionInfo.caseListJson"
  />

我们在父组件向子组件传递了case-list数据，并且使用了.sync修饰符，那么我们可以在子组件中也就是case-list组件中修改父组件中的值而父组件不需要监听事件，方法如下：

this.$emit("update:case-list" , "要改变的数据")

这样在子组件中抛出事件 父组件可以使用.sync修饰符来将抛出的数据进行同步修改，但是要注意的是，在抛出事件时传递的数据就是父组件传递给子组件的数据，在外部就不可再次修改了，因此.sync只是一个语法糖来方便书写代码逻辑，并没有什么其他的地方。