vue .sync的使用 2021年7月

sync属性是语法糖，能够简单解决一个变量的父子组件交互

对比了一下其他解释，发现不生效了，我发一版本好用的

子组件关闭自己的方法，传统是emit 调父组件的函数，这个不需要一行搞定

//父组件
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <button @click="isShow = true">打开</button>
    <HelloWorld msg="Welcome to Your Vue.js App" :value="value" v-model:isShow="isShow" v-if="isShow"/>·
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  data () {
    return {
      value: '比巴卜',
      isShow: true
    }
  },
  components: {
    HelloWorld
  },
  methods: {
  }
}
</script>

子组件
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="changeIsShow">关闭</button>
    <div>{{ value }}</div>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    value: String
  },
  methods: {
    changeIsShow() {
      this.$emit('update:isShow', false)
    }
  }
}
</script>

注意，emit中一定是update,  其他名称不生效