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

Posted 2023-02-16

【中文标题】如何切换 VueJs 组件的可见性？

【英文标题】：How to Toggle Visibility of VueJs Component?

【发布时间】：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. 

【参考方案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”之类的方法在组件之间进行通信