今日问题总结-100vh和vue路由

今日问题总结

1. vue中$emit触发父级事件

1.标签上如何触发父级传递的事件：
@click="$emit('parentEvent')"

2.methods中书写为：
作用：触发父级事件，回调向父级传递参数（子传父）。
@click="clickEvent(index)"

methods:{
clickEvent(index){
this.$emit('parentEvent',index)
}
}

2 关于100%高度问题

今天在vue中使用了100vh，而且配合了计算属性，因为顶部有一部分内容，所以通过计算减去了顶部的内容。
height:calc(100vh - 70px) 70px为顶部内容的高度。所以当顶部内容占据是可以使用计算减去顶部高度。

vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;

但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，

但是设置height:100vh，该元素会被撑开屏幕高度一致。

3.vue路由

<router-link :to="{name:'二级路由页面路径'}">
          <div class="icon_text">
          <img src="../assets/peo.png" alt />
          <p>首页</p>
        </div>
</router-link>


<el-container style="background-color:#f6f6f6;height:calc(100vh - 70px);">
        <!--二级路由显示接口处-->
        <router-view></router-view>
</el-container>