這篇文章是記錄我在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)
      },
    }