vue-18-属性透传案例-复习

我的理解是这样子，不对的话，请指出

Navbar与Layout是兄弟关系，那要实现的他们的通信可以利用属性/事件透传。父定义属性/事件 会透传给 子组件，子组件就接收父组件传过来的属性/事件，如a组件 接收 父组件自定义的属性/事件 然后通过父组件 再传递给b组件。

---

父组件App.vue

<template>
  <div class="root">
    <Navbar @click="handleClick()"></Navbar>
    <Layout class="layout" :myshow="isShow"></Layout>
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'
import Layout from './components/Layout.vue'

export default {
  data() {
    return {
      isShow: false,
    }
  },

  methods: {

    handleClick() {

      this.isShow = !this.isShow
      console.log('父组件绑定的点击事件，会透传到子组件上，也就是 Navbar组件 和 Layout组件 ,所以点击Navbar组件的按钮可以控制Layout的显示与隐藏');

    }
  },
  components: {
    Navbar,
    Layout
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.navbar {
  height: 50px;
}

.layout {
  flex: 1;
  display: flex;
}
</style>

子组件Layout.vue

<template>
  <div>
    <Sidebar v-if="myshow"></Sidebar>
    <Content></Content>
  </div>
</template>
<script>
import Content from './Content.vue'
import Sidebar from './Sidebar.vue'
export default {

  props: ['myshow'],

  components: {
    Content,
    Sidebar,
  }
}
</script>

<style></style>

子组件Navbar.vue

<template>

  <div class="navbar">

    <button  v-bind="$attrs">展开/折叠侧边栏</button>

    <div>vue3单文件navbar</div>
  </div>
</template>
<script>
export default {

  // 禁止透传到根节点上，如想透传到button按钮上，则加上v-bind
  inheritAttrs: false,

  data() {
    return {

    }
  },
  methods: {
   
  }
}
</script>
<style scoped>
div {
  background-color: #555;
}
</style>

运行截图：

点击Navbar按钮前：

---

点击Navbar按钮后：