- 多个组件可以在一起使用,它们的关系可以是:平行的、嵌套包含的
- 目标:应用两个组件,它们是彼此平行的关系
- 使用:把组件用import引入、用conmponent注册。
- 组件引用(2种)
- 注册后引用(全局定义方式):
<script>
import navbar from './components/Navbar'
import sidebar from './components/Sidebar'
//全局组件
//模块化
import Vue from 'vue'
//注册全局
Vue.component("navbar",navbar)
Vue.component("sidebar",sidebar)
- 注册不引用(局部定义方式):
components:{
navbar:navbar, //组件名,组件对象
sidebar:sidebar
}
- 将组件标签嵌入到要显示的页面。
<navbar></navbar>
<sidebar></sidebar>
</div>
例题:navbar-click按钮控制sidebar显示与否
<template>
<navbar>
<button @click="isShow=!isShow">navbar-click</button> <!--要在Navbar.vue中设置插槽-->
</navbar>
<sidebar v-show="isShow"></sidebar>
</template>
<script>
import navbar from './components/Navbar'
import sidebar from './components/Sidebar'
//全局组件
//模块化
// import Vue from 'vue'
//注册全局
// Vue.component("navbar",navbar)
// Vue.component("sidebar",sidebar)
export default {
data(){
isShow:false
},
components:{
navbar:navbar, //组件名,组件对象
sidebar:sidebar
}
}
</script>
Navbar.vue:
<template>
<div>
navbar-<slot></slot>
</div>
</template>
Sidebar.vue:
<template>
<aside>
sidebar
<ul>
<li>tiramisu</li>
<li>coke</li>
</ul>
</aside>
</template>
样式冲突覆盖:
全局组件的优先级较高,被引用的会被覆盖。
解决:
在被引用的style标签加上scoped属性作用域,css局部生效,当前样式只影响当前组件。
<style lang="less" scoped>