2、vue-组件化の封装组件、引用组件

首先我们写了一个组件叫做 bottomNav 的组件 作为底部导航使用

<template>
  <div class="hello">
  <!--底部导航-->
    <div class="bot_nav">
        <span v-for="(a,i) in arr" @click="go(a)">{{a}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      arr:["首页","周边","购物车","我的"]
    }
  },
//方法钩子函数
  methods:{
    go(i){
//      打印当前导航对应文字
        console.log(i)
    }
  },
//初始化钩子函数
  mounted(){
    console.log("初始化渲染")
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bot_nav{
    width: 100%;
    background: red;
    display: flex;
    flex-direction: row;
    height: 3rem;
    line-height: 3rem;
    position: fixed;
    bottom: 0;
    left: 0;
}
.bot_nav span{
    background: palegoldenrod;
    display: inline-block;
    flex: 1;
    display: flex;
    justify-content: center;
    align-content: center;
}
</style>

这个情况下属于已经抛出组件了。
在boss的页面引用这个bottomNav组件 代码如下：

<template>
  <div class="hello">
    boss页面
    <!--引用底部导航组件-->
    <bottom-nav></bottom-nav>

  </div>
</template>

<script>
//引用底部导航组件
    import bottomNav from './zujian/bottomNav'
    
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    bottomNav,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

引用的时候有三个要注意的项：
（1）引用路径：确保路径正确

image.png

（2）声明组件：components一定要声明组件 声明的组件之间用逗号隔开

image.png （3）页面使用组件：这里我是用的驼峰命名法声明的组件，但是在页面使用组件时候不能识别大写的驼峰，此时他会自动转换为小写，这种情况下就会报错如下： image.png

此时处理方法是在小写前面加“-”

image.png
副路径参考：
image.png