前端爬坑日记，你在初入vue项目开发过程中可能会掉进的坑

这篇文章是记录我在vue项目开发中遇到的各种巨坑，希望看了能对你有一些帮助，这篇文章会长期更新

1.Vue中使用sass

首先通过以下代码安装sass的依赖：

npm i sass-loader node-sass - s

然后在webepack.base.conf.js目录下配置以下代码：

{
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
      },

要想搞好vue，这个文件的结构是你要弄懂的

然后就是巨坑来了

1.如果你要引入sass文件，一定要使用.scss后缀，sass会导致你的css代码无法兼容；

2.不要把你的sass文件引入到main.js这个入口文件中，它是无法解析的；可以通过以下方法实现：

安装以下依赖

npm i sass-resources-loader -s

在build目录下的utils.js的这个位置配置以下代码：

scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/style/sass/all.scss')
        }
      }
    )

2.组件传值，路由传值

在vue中组件传值会经常出现，包括父->子，子->父，兄弟之间三种情况，详情可参考我的另一篇文章https://blog.csdn.net/m0_37782372/article/details/80942627

这里要说的一个巨坑是这么一种情况：

你的兄弟组件之间传值是跨路由的，其实正常来说是不会用组件传值的方式的，但是这样会有什么后果呢？

你的值在兄弟组件接收到了，但是无法实现动态更新！

所以在敲代码前一定要看清楚是不是跨路由了！

 

说道路由传参，又有一个巨坑，先上代码：

传参

this.$router.push({
        path: 'practise',
        name: 'Practise',
        params: {
          titleMsg: this.subject
        }
      })

接收

let msg = this.$route.params.titleMsg

上面的代码是没有问题的（我是真怕放了错误代码让人先入为主，跟我一样掉坑里了）

1.传参要注意发送位置是$router，是有r的，接收位置是$route，是没有r的！

2.如果你的路由跳转要带参数，就像上面那种情况，一定要使用name跳转！一定要使用name跳转！一定要使用name跳转！，

不然你只能接收一个undefined了！

3.父组件控制子组件显示

// 通过绑定参数showEnter控制子组件显示，需要加上sync修饰符
// 子组件中通过prop接收参数，并使用另一个变量对接收到的参数进行操作，这里使用showDetails进行操作，当它变化时，通过'update:showDetail'传递参数，告知父组件
<drug-pass :drugInfo="drugInfo" :showEnter.sync="showEnter" ref="drugPass"></drug-pass>

props: {
      showDetail: {
        type: Boolean,
        default: false
      },
    }
watch: {
      showDetail(val) {
        this.showDetails = val
      },
      showDetails(val) {
        this.$emit('update:showDetail', val)
      },
    }

4.路由跳转涉及eventBus传参

在vue中我们通常使用eventBus进行非父子关系的组件通信，eventBus说白了就是一个临时的vue文件，用于储存变量，如下：

let eventBus = new Vue()

传参的方式是由a组件发送emit事件，b组件通过on事件监听获取传值，如下：

// a.vue
eventBus.$emit('msg', testMsg)

// b.vue
eventBus.$on('msg', (res) => {
    this.list = testMsg
    console.log(this.list)
})
console.log(this.list)

通常来说，这样的写法就能实现组件通信了。

注意b组件里使用了箭头函数，使函数中的this指向当前vue。如果不使用箭头函数，必须使用外部的临时this，因为普通的函数会改变this的指向，如下：

let _this = this
eventBus.$on('msg', function (res) {
    _this.list = res
    console.log(_this.list)
}
console.log(_this.list)

重点来了，当组件传参涉及路由跳转时，还会这么顺利吗？答案是：否！

上面的代码中都在$on的内外打印了this.list，你会发现，当从a组件跳转b组件时，$on内部的list更新了，而外部却没有更新，从结果上的表现来说就是：怎么data更新了视图没有更新？！！

这里我们需要知道的是vue-router跳转与vue的生命周期的关系，从a组件跳转b组件，生命周期如下：

a beforeCreate
a created
a beforeMounte
a mounted
b beforeCreate
b created
b beforeMount
a beforeDestroy
a destroy
b mounted

再看$on的执行时机，如果你通过click事件触发emit，那么on事件就算放在b的created钩子里，也无法获取，打印顺序如下：

a beforeCreate
a created
a beforeMounte
a mounted
msg
b beforeCreate
b created
b beforeMount
a beforeDestroy
a destroy
b mounted

此时b组件的生命周期还没开始，因此此时就算使用this.list = testMsg也无法更新视图，因为此时的this根本不指向当前vue！

破案了：在beforeDestroy里执行this.$emit()