vue-cli中的:visible.sync是什么意思

在Vue-cli中，:visible.sync 是一个指令，用于实现父组件与子组件之间的双向绑定。通过这个指令，可以实现在父组件中改变子组件的状态，并且子组件中的状态改变也能反映到父组件中。

下面是这个指令的应用示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component :visible.sync="show"></child-component>
    <button @click="handleClick">Toggle Child</button>
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    }
  }
}
</script>

在这个示例中，我们将 visible.sync 属性绑定到了 show 变量上，而 show 变量是在父组件中声明的。

同时，在父组件中，我们定义了一个用来切换显示状态的方法 handleClick，在点击按钮时，根据 show 的值，来控制是否显示子组件。

在子组件中，我们只需要将 visible 属性设置为两个变量的其中一个即可：

<!-- 子组件 -->
<template>
  <div v-show="visible">Hello World!</div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  }
}
</script>

在子组件中，我们只需要声明一个 visible 属性，来接收从父组件传递过来的值，在子组件中通过 v-show 指令来控制元素是否可见。

当父组件中的 show 变量改变时，子组件中的 visible 属性也会跟着改变，从而实现了双向绑定的效果。

另外一个示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component :visible.sync="show"></child-component>
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      show: true
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div v-show="visible">I'm Visible!</div>
  <div v-show="!visible">I'm not Visible!</div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  }
}
</script>

在这个示例中，我们在子组件中为 visible 变量设置了两个状态，用于显示不同的内容。当 visible 属性为 true 时，显示 "I'm Visible!"，反之，显示 "I'm not Visible!"。

当在父组件中将 show 变量设置为 false 时，子组件中的 visible 属性也会被更新为 false，从而导致子组件中显示 "I'm not Visible!"，反之，则显示 "I'm Visible!"。

总之，通过这个指令，我们可以很方便地实现父子组件之间的状态同步。