如何通过单击另一个组件中的按钮使视图在另一个组件中可见？

<!-- 第一个组件中的按钮 -->
<button id="toggleButton">切换视图</button>

<!-- 第二个组件中的视图 -->
<div id="secondComponent" style="display: none;">
  这是第二个组件的视图
</div>

<script>
  // 在第一个组件中监听按钮的点击事件
  document.getElementById('toggleButton').addEventListener('click', function() {
    // 获取第二个组件的视图元素
    var secondComponent = document.getElementById('secondComponent');
    
    // 切换第二个组件的可见性
    if (secondComponent.style.display === 'none') {
      secondComponent.style.display = 'block';
    } else {
      secondComponent.style.display = 'none';
    }
  });
</script>