vue-多个单文件组件

• 多个组件可以在一起使用，它们的关系可以是：平行的、嵌套包含的
• 目标：应用两个组件，它们是彼此平行的关系
• 使用：把组件用import引入、用conmponent注册。
• 组件引用（2种）

1. 注册后引用（全局定义方式）：

<script>
import navbar from './components/Navbar'
import sidebar from './components/Sidebar'
//全局组件
//模块化
import Vue from 'vue'
//注册全局
Vue.component("navbar",navbar)
Vue.component("sidebar",sidebar)

2. 注册不引用（局部定义方式）：

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>