关于vue2.x的sync坑点

来源：互联网发布：免费开源电商系统源码编辑：程序博客网时间：2024/06/05 22:34

关于vue2.x的sync这个坑，可是把我坑的不要不要的，因为基础有点薄弱，所以看了官文关于sync的介绍一脸懵，虽然官文讲的也很清楚，但是对于一棵小白菜来说有点不知所云了。

好了正式介绍了：

在2.3.0+版本之后，vue又重新引进了.sync这个修饰符了，这个修饰符可以让子组件的数据带动父组件的数据改动。但是除了这个修饰符，我们还要在子组件里面添加一个watch 监测事件来，触发修改父组件的数据。

首先，要补充一下watch 这个组件的选项的说明（我就是被这个坑了，基础差没往这边想）

watch：

vue.js 提供了一个watch ，它用于观察Vue实例上的数据变动，对应一个对象，键是观察表达式，值是对应回调值，值也是方法名，或者对象，他的键简单来说就是组件中data中的键（可以方便理解为watch就是检测data的数据的）

接着，要读解一下 .sync 的例子：

1
<comp:foo.sync="bar"></comp>

上面的效果或自动拓充为

前期工作做好了那么下面的就是我的实例了（注意，这是练习的，没有用到webpack之类的。）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<title>Examples</title>
<scriptsrc="vue.js"></script>
</head>
<body>
<divid="app">
<table>
<tr>
<thcolspan="3">父组件数据</th>
</tr>
<tr>
<td>name</td>
<td>{{name}}</td>
<td><inputtype="text"v-model="name"/></td>
</tr>
<tr>
<td>age</td>
<td>{{age}}</td>
<td><inputtype="text"v-model="age"/></td>
</tr>
</table>
<my-componentv-bind:myname.sync="name"v-bind:myage.sync="age"></my-component>
</div>
<templateid="myComponent">
<table>
<tr>
<thcolspan="3">子组件数据</th>
</tr>
<tr>
<td>myname</td>
<td>{{myname}}</td>
<td><inputtype="text"v-model="myname"/></td>
</tr>
<tr>
<td>myage</td>
<td>{{myage}}</td>
<td><inputtype="text"v-model="myage"/></td>
</tr>
</table>
</template>
<script>
varvm=newVue({
el:'#app',
data:{
name:'lin',
age:18
},
components:{
'my-component':{
template:'#myComponent',
props:['myname','myage'],
data:function(){
return{
myname:this.name,
myage:this.age
}
},
watch:{
name:function(){
this.name=name
},
myname:function(){
this.$emit("update:myname",this.myname)
}
}
}
}
})
</script>
</body>
</html>

为了方便，我只是改了第一个数 name 而已， age没有改动，你要是想改的话，再套就行了。

也不知道我的想法对不对，我就是遇到这这个不太懂，查百度了，例子是在太少，基础好的人可以看懂，可是基础差点的话，真的要磨好久。

为了不让更多的人像我一样心态爆炸，我才写下这个。

希望，对各位有帮助。

阅读全文

0 0