简单记个笔记
抽离出来的组件
HeaderTop
<template>
<header class="header">
<slot name="left" ></slot>
<span class="header_title">
<span class="header_title_text ellipsis">{{title}}</span>//title接受属性值
</span>
<slot name="right"></slot>//slot接受标签
</header>
</template>
<script>
export default {
props:{
title:String//接受父组件的属性值
}
};
</script>
调用HeaderTop组件,并给slot插入值
<template>
<HeaderTop title="昌平区北七家宏福科技园(337省道北)">//调用子组件,并传值
<span class="header_search" slot="left">
<i class="iconfont icon-sousuo"></i>
</span>
<span class="header_login" slot="right">//slot差入标签
<span class="header_login_text">登录|注册</span>
</span>
</HeaderTop>
```<script>
</template>
import HeaderTop from "../../components/HeaderTop/HeaderTop.vue";
export default {
components: {
HeaderTop,
},
};
</script>