这个组件怎么在product里引用

他们两差很多啊

CC陈十一 2019-07-09

源自：实战：项目准备与骨架搭建 3-2 Tabbar 组件

收起

4回答

好帮手慕慕子 2019-07-09 18:51:18

同学你好，你的思路是可以的，可以直接在app.vue文件引入tabbar，这样在每个页面中都会有tabbar了，参考示例

在app.vue中引入tabbar组件
需要设置在app.vue中设置tabbar的样式哦，将它定位在最底部，并设置它的显示层级。

同学对于自己的想法可以编写代码实践一下，根据效果在慢慢调整代码，这样才能帮助自己成长哦

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

追随着微风 #1

老师你好，我在这里import的时候报错，是缺少了什么吗 This dependency was not found: * components/tabbar in ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/App.vue To install it, you can run: npm install --save components/tabbar

2019-07-24 09:51:57
好帮手慕慕子回复追随着微风 #2

同学你好，看你的报错信息，是tabbar不存在导致的，可能是引入tabbar的路径写错了，建议：可以检查一下你的文件引入路径是否正确。老师这里是提供一个思路给“CC陈十一”同学作为参考使用的，同学你在参考的时候，需要根据自己的项目做出适当的调整哦，如果还有疑惑，可以在问答区重新提问，我们会针对你的问题，继续为你解答的，祝学习愉快~~~

2019-07-24 10:05:49
追随着微风 #3

找到原因了引入路径多了一个空格

2019-07-24 11:14:47

好帮手慕慕子 2019-07-09 16:05:55

同学你好，由于你的vue文件引入的有其他部分的组件，老师这边无法准确的测试你的代码，在这里，老师给同学提供一个思路供你参考

首先，观察这两部分的布局。可以发现tabbar的布局样式和product页面圈起来的部分布局类似，上面是图标，下面的文字的布局方式，所以可以将这部分的css提取出来，作为全局的样式，方便复用
如下参考设置公共样式
在product中复用样式，可以将公共的样式引入，然后设置product的tabbar样式，复用的部分类名需要和tabbar中的样式保持一致。

综上可知，并不是只有一模一样的布局才可以复用样式，部分布局一样也是可以复用样式的。编程是灵活的，我们不用局限与复用了样式就不可以在修改了，我们还是可以修改的，例如：这里可以在当前页面中做出细微的调整，实现我们想要的效果。

同学可以自己下去再测试一下。

希望能够解决你的疑惑，祝学习愉快，望采纳！

收起回答

提问者 CC陈十一 #1

老师，这个tabbar怎么让它不自动引用，它放在app。vue里不管什么页面都会有tabbar，很烦

2019-07-09 16:27:12

提问者 CC陈十一 2019-07-09 12:08:19

<template>
<div class='product'>
    <header class='g-header-container'>
      <home-header></home-header>  
    </header>
    <me-scroll  ref='scroll'>
        <home-slider ref='slider' @getsliders='getdata'></home-slider>
        <me-information :idata='data' @loaded='updataScroll'></me-information>
    </me-scroll>
</div>
</template>
<script>
 import {getProductDetail} from 'api/product'
 import HomeSlider from './slider'
 import HomeHeader from './herder'
 import MeScroll from 'base/scroll';
 import MeInformation from './imformation';
 import CTabbar from 'components/tabbar';

  export default{
    name: 'produect',
    components:{
      HomeHeader,
      HomeSlider,
      MeScroll,
      MeInformation,
      CTabbar
    },
    data(){
      return{
        data:[]
      }
    },
    created(){
      getProductDetail(this.$route.params.id);
    },
    methods:{
      getdata(datas){
        this.data=datas;
      },
      updataScroll(){
        this.$refs.scroll.update();
      }
    }
  };
</script>
<style scoped>

 @import "~assets/scss/mixins";
 .product {
    height:617px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: $product-z-index;
    width: 100%;
    background-color: $bgc-theme;
  }
</style>

这是我pruduct的主页

收起回答

好帮手慕慕子 2019-07-09 11:55:43

同学你好，请问你这里是想问如何在product里面引用tabbar组件吗？如果是指这里话，那么视频中老师的意思不是在product中引入tabbar组件，老师的意思是tabbar组件的样式和product页面下部分的样式差不多，可以将tabbar的样式设置作为全局的样式，方便在product中复用样式哦。

视频中2分30秒左右。老师有详细的讲解哦，同学可以回顾视频仔细听一下哦

如果不是指这里的话，建议：可以详细的描述一下指的是哪里，再次提问，我们会继续为你解答的

如果帮助到了你，欢迎采纳！

祝学习愉快~~

收起回答