vue中的sync

短命女 2024-04-19 12:13 26阅读 0赞

Hello！大家好今天给大家讲一下我最近了解到的一些新的东西在这里给大家分享一下。

一：.sync  
官方推荐使用一种update:my-prop-name 的模式来替代事件触发，目的是为了优雅而不粗鲁的实现父子组件间的双向绑定！先来完成一个小功能：通过父组件按钮将子组件显示出来。  
父组件代码（通常的做法）：

<template>
    		  <div>
    		    <button @click="show = true">我是父组件的按钮</button>
    		    <coment-children v-if="show"  @isShow="isShow"></coment-children>
    		  </div>
    		</template>
    		<script>
    		import comentChildren from "./children";
    		export default {
    		  data() {
    		    return {
    		      show: false
    		    };
    		  },
    		  components: {
    		    comentChildren
    		  },
    		  methods:{
    		      isShow(val){this.show = val;}
               }
    		};
    		</script>

子组件child代码：

<template>
    		  <div style="width:200px;height:200px;background:red;">
    		    我是helloWorld模块的子组件
    		     <button @click="isShow">我是子组件的按钮点我隐身</button>   //第一种
    		     <button @click="$parent.show = false">我是子组件的按钮点我隐身</button>  //第二种（不推荐也不规范）
    		  </div>
    		</template>
    		<script>
    		export default {
    		  data() {
    		    return {};
    		  },
    		  methods: {
    		    isShow() {
    		      this.$emit("isShow", false);
    		    }
    		  }
    		};
    		</script>

然后咱们改一种方法看看能不能正常运行

父组件： <coment-children    @update:isShow="show"  v-if="show"/></coment-children>

子组件的emit自然也要做对应调整：

this.$emit("update:isShow",false);

一切运行正常不报错，咱们最后改成.sync的方法

父组件：<template>
    			  <div>
    			    <button @click="show = true">我是父组件的按钮</button>
    			    <coment-children v-if="show" :isShow.sync="show"></coment-children>
    			  </div>
    			</template>
    			<script>
    			import comentChildren from "./children";
    			export default {
    			  data() {
    			    return {
    			      show: false
    			    };
    			  },
    			  components: {
    			    comentChildren
    			  }
    			};
    			</script>

子组件：<template>  
<div style=“width:200px;height:200px;background:red;”>  
我是helloWorld模块的子组件  
<button @click="$emit(‘update:isShow’,false)">我是子组件的按钮点我隐身</button>  
</div>  
</template>  
<script>  
export default \{  
data() \{  
return \{\};  
\}  
\};  
</script>

git地址：[https://github.com/Liingot/sync.git][https_github.com_Liingot_sync.git]  
注意：.sync官方给出的解释就是一种语法糖的意思  
最后：sync只是给大家伙提供了一种与父组件沟通的思路而已！所以在后面日子里，你如果只是单纯的在子组件当中修改父组件的某个数据时，建议使用sync，简单，快捷，不需要在传一个自定义方法来接收了，今天就到这里谢谢大家。

[https_github.com_Liingot_sync.git]: https://github.com/Liingot/sync.git