如何切换 VueJs 组件的可见性？答案

【问题标题】：How to Toggle Visibility of VueJs Component?如何切换 VueJs 组件的可见性？
【发布时间】：2020-04-10 13:31:51
【问题描述】：

在我的 Laravel 应用程序中，我在 Blade 模板上有一个按钮来显示/隐藏 Vue 组件。我在以下代码here 的帮助下尝试了以下操作。我收到以下错误：

[Vue 警告]：实例上未定义属性或方法“isShow” 但在渲染期间引用。确保该属性是反应式，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。看： https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

@extends('layouts.app')
@section('content')
 <button v-on:click="isShow = !isShow">Toggle hide and show</button>
 <site-email  v-if="isShow"></site-email>
@endsection

组件

 <template>
    <div class="label label-info"> {{domain}}'s Email</div>
 <template>

 <script>
  export default {
    data(){
      return {
          isShow : false,
        }
    }
 }
 </script>

I will highly appreciate your help.

【问题讨论】：

标签： laravel-5 vuejs2 vue-component

【解决方案1】：

Vue 的响应式数据属性是Component scope。

您现在正在组件外部访问isShow，因此 Vue 无法访问该属性。

我的建议：你可以在<site-email>组件中插入按钮。

 <template>
    <button v-on:click="isShow = !isShow">Toggle hide and show</button>
    <div v-show="isShow" class="label label-info"> {{domain}}'s Email</div>
 <template>

 <script>
  export default {
    data(){
      return {
          isShow : false,
        }
    }
 }
 </script>

或者，如果您不想在组件中包含按钮，则必须使用诸如“事件总线”，“.sync props”之类的方法在组件之间进行通信

【讨论】：