Vue实现网页版响应式顶部导航栏-------插槽-子组件-父组件

一、先上结果图：

当屏幕缩小时的界面：

二、首先我们先创建一些用到的组件，如图

二、顶部组件的相关操作(了解插槽)

1、NavBar.vue上代码：
里面ul>标签放置一个插槽，用来放置多个li>标签。为什么要放插槽呢？？因为在一些地方我们可能还会用到像这样模板，只是那时的li>标签内容不一样了。所以插槽就很好解决了，下次使用只需要改li>标签的内容即可

<template>
  <nav>
    <div class="logo">
      <slot name="logo-icon"><img src="../../assets/logo.jpg"></slot>
      <slot name="logo-title">巧克力电影</slot>
    </div>
    <div class="search">
      <el-input
        placeholder="请输入内容"
        size="medium"
        class="input_search">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <ul class="nav-menu">
      <slot></slot>
    </ul>
    <div class="burger" @click="handleBurger()">
      <div class="top-line"></div>
      <div class="middle-line"></div>
      <div class="bottom-line"></div>
    </div>
  </nav>
</template>

<script>
    export default {
   
        name: "NavBar",
        methods:{
   
            handleBurger(){
   
                const burger=document.querySelector(".burger");
                const navMenu=document.querySelector(".nav-menu");
                burger.addEventListener("click",function(){
   
                    burger.classList.toggle("active");
                    navMenu.classList.toggle("open");
                })
            }
        }
    }
</script>

2、NavBar.vue样式
响应式页面布局
@media screen and (max-width: 768px){
}
当网页屏幕小于max-width，样式发生的变化