先来看下官方对于sync的解释：
2.3.0+ 新增
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。
大概意思就是在对子组件传递数据的时候，我们希望在子组件中传递的数据发声了变化，那么父组件中的数据也发声变化，但是这样双向绑定会带来维护上的问题。
下面我们通过一个案例，子组件改变父组件的传递来的数据，先使用$emit()来实现，重要的步骤已经做了注释，如果不懂，可以下方留言
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js"></script>
</head>
<style>
.box{
width: 300px;
height: 600px;
}
</style>
<body>
<div id="app">
<p>{{title}}</p>
<!-- :titles传递数据 @changetitle是自定义的事件，用来告诉父组件干了什么事情，然后会触发父组件中的change事件-->
<child :titles='title' @changetitle='change' ></child>
</div>
<script type="text/template" id="child">
<div class="box">
<input type="text" v-model="title" @keyup="changetitle">
</div>
</script>
<script>
var child={
template:'#child',
props:['titles'],
data(){
//这一步是因为我们在传递数据的时候,不能直接使用this.titles来传递给父组件
let title=this.titles
return {
title
}
},
methods:{
changetitle(){
//把数据传递给父组件
this.$emit('changetitle',this.title);
}
}
}
new Vue({
el:'#app',
data:{
title:'我是父组件中的数据'
},
methods:{
change(val){
this.title=val;
}
},
components:{
child
}
})
</script>
</body>
</html>通过自定义事件，然后使用$emit()给父组件传递修改后的数据，看着比较麻烦，下面使用sync来实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
{{title}}
<child :title.sync="title" ></child>
</div>
<script type="text/template" id="child">
<div>
接受的数据是"{{title}}"
<button @click="changes">改变接受的数据</button>
</div>
</script>
<script>
var child={
template:'#child',
props:['title'],
methods:{
changes(){
this.$emit('update:title','hello');
}
}
}
new Vue({
el:'#app',
data:{
title:'根组件'
},
components:{
child
},
methods:{
}
})
</script>
</body>
</html>以上已经实现了子组件修改父组件传递的数据，并且子组件修改了数据，父组件也会及时发声变化，
大概步骤：如果需要数据同步加上.sync,然后子组件使用$emit('update:事件名称',传递的数据)
最后：sync只是给大家伙提供了一种与父组件沟通的思路而已，把父组件的数据传递给子组件，子组件发声了变化，父组件也跟着变化，所以在后面日子里，你如果只是单纯的在子组件当中修改父组件的某个数据时，建议使用sync，简单，快捷，有档次！真好！
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站，联系方式11523518。
热评文章
标签列表
热门文章
友情链接