不积跬步，无以至千里；不积小流，无以成江海。
Vuejs语言基础
sync修饰符：
类似 v-model，它主要是解决了父子组件的双向绑定问题；
由于单向数据流动，使得不能直接在子组件里面修改父组件传过来的数据。
无 sync 修饰符：
<template>
<div id="app">
<button @click="visible=true">显示</button>
<my-cpn :visible="visible" @close="closeAlert"></my-cpn>
</div>
</template>
<script>
import mycpn from './components/mycpn'
export default {
name: 'App',
components:{'my-cpn': myalert},
data(){
return {
visible:false
}
},
methods:{
closeAlert(value){
this.visible = value
}
}
}
</script>
mycpn.vue
<template>
<div class="cont" v-show="visible">
<h2>这是一个对话框</h2>
<button @click="closeAlert">关闭</button>
</div>
</template>
<script>
export default {
name: "mycpn",
props:{
visible:{
type:Boolean,
default:false
}
},
methods:{
closeAlert(){
this.$emit('close',false)
}
}
}
</script>
<style scoped>
</style>
使用sync修饰符：
<template>
<div id="app">
<button @click="visible=true">点击</button>
<my-cpn :visible.sync="visible"></my-cpn>
</div>
</template>
<script>
import mycpn from './components/mcpn'
export default {
name: 'App',
components:{'my-cpn': mycpn},
data(){
return {
visible:false
}
},
}
</script>
mycpn.vue
<template>
<div class="cont" v-show="visible">
<h2>这是一个对话框</h2>
<button @click="closeAlert">关闭</button>
</div>
</template>
<script>
export default {
name: "myalert",
props:{
visible:{
type:Boolean,
default:false
}
},
methods:{
closeAlert(){
this.$emit('update:visible',false)
}
}
}
</script>
<style scoped>
</style>
注意： sync 修饰符其实是做了两步动作：声明传的数据visible；声明@update:visible事件。
sync和v-model的区别
v-model必须是 input 标签，它做了两步动作：父组件传给子组件 value，子组件通过触发input事件来修改value；
因此，子组件必须有 input 标签才行，而 sync 不限制标签，因此子组件在修改数据时，就必须约定使用@update:xxx。
