一起学Vuejs（二十）----- sync修饰符

不积跬步，无以至千里；不积小流，无以成江海。

 

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。

 

 

博客借鉴：https://www.jianshu.com/p/ab3a4bf97ebd