计算机系统应用教程网站

网站首页 > 技术文章 正文

前端基础:说说Vue中.sync的用法，props由单向变成双向数据绑定

btikc 2024-10-12 13:25:55 技术文章 6 ℃ 0 评论

在一些情况下，我们可能会需要对一个 prop （父子组件传递数据的属性） 进行“双向绑定”。当一个子组件改变了一个带 .sync 的prop的值时，这个变化也会同步到父组件中所绑定的值。这很方便，但也会导致问题，因为它破坏了单向数据流。（数据自上而下流，事件自下而上走）。

例如：

<child :foo.sync=”msg”></child>

就会被扩展为： 

 <child :foo=”bar” @update:foo=”val => bar = val”>

当子组件需要更新 foo 的值的时候，他需要显式的触发一个更新事件： 

 this.$emit( “update:foo”, newValue );

案例：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>.sync的用法</title>
 <style type="text/css">
 .hello {
 padding: 30px 20px 30px 5px;
 border: 1px solid #ddd;
 margin-bottom: 10px;
 }
 </style>
 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
 <div id="demo">
 <child :show.sync='valueChild'></child>
 <!-- <child :show='valueChild' @update:show="update"></child> -->
 <button @click="changeValue">toggle</button>
 </div>
 <script type="text/javascript">
 var child = {
 props: ['show'],
 template: `<div v-if="show" class="hello">
 <p>默认初始值是{{show}}，所以是显示的</p>
 <button @click.stop="closeDiv">关闭</button>
 </div>`,
 methods: {
 closeDiv() {
 //上面注释部分@update:show被.sync隐藏掉了，但子组件仍需要显式触发
 this.$emit('update:show', false);
 }
 }
 }
 var vm = new Vue({
 el: "#demo",
 data: {
 valueChild: true,
 },
 components: {
 child
 },
 methods: {
 changeValue() {
 this.valueChild = !this.valueChild
 },
 // update(val) {
 // this.valueChild = val
 // }
 }
 })
 </script>
</body>
</html>

1.单向数据：点击toggle的时候是父组件修改了自身数据valueChild，然后通过prop即show属性，单项传递给子组件child，使得v-if="show"控制显示与隐藏。

2.双向数据：点击关闭的时候，子组件触发事件'update:show',并传参数false，父组件监听到@update:show，执行回调函数update（自定义，当然直接写js到模板中可能更简洁），然后修改父组件数据valueChild，继续上述1的步骤。

欢迎关注

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表