vue中sync的简述

用途：子组件内想要修改父组件data数据

优点：父组件内不需要通过methods方法接收

我们先写个简单的父组件，配上一个具有切换子组件是否展示的按钮

<template >
  <div class="home" >
	  <h1>this is home page</h1>
	  <button type="button" @click="change" >展示/隐藏子组件</button>
	  <son v-show="show" :show.sync='show'></son>
  </div>
</template>

<script>
import son from './son.vue'
export default {
  name: 'Home',
  data(){
	  return{
		  show:true,
	  }
  },
  components:{
	  son,
  },
  methods:{
	  change(){
		  this.show=!this.show
	  }
  }
}
</script>

现在再写一个子组件，为了方便观察添加一点css

<template>
	<div id="son">
		这是子组件
		<button type="button" @click="changets">点我不展示子组件</button>
	</div>
</template>

<