vue開發中常見問題總結

一、如何創建一個vue-cli項目

1. 安裝cnpm，執行命令npm install -g cnpm
2. 安裝vue-cli，執行命令cnpm insall -g vue-cli
3. 初始化項目，vue init webpack test

二、在vue-cli項目中使用scss語法

1.安裝sass-loader和node-sass（sass-loader依賴於node-sass）
npm install --save-dev sass-loader
npm install --save-dev node-sass
2.在build文件夾下的webpack.base.conf.js的rules裏面添加配置
{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}
3.在vue頁面中修改style標籤的語法標識，然後使用
<style lang="scss">

三、watch監聽事件

watch:{
      detailDialog: {
        handler(val, oldVal) {
          if (!this.detailDialog) {
            this.getList();
          }
        },
        deep: true // 監聽這個對象中的每一個屬性變化
      },
    },

四、vue路由配置

1.定義組件，可以從其他文件 import 進來。

2. 定義路由，每個路由應該映射一個組件。

3.指定路由出口，也稱路由插座

五、vue路由傳參

六、vue組件通信

（一）父子組件通信

1. 父子組件的定義
   第一種：在當前組件中import 進其他組件，用自定義標籤接收，在當前組件的component裏註冊該標籤，頁面上可以直接用<自定義標籤></自定義標籤>樣子使用，當前組件爲父組件，被引入的組件爲子組件。
   
   第二種：在路由中定義好組件，組件中含有children，頁面上通過<router-view></router-view>形式使用，也算是父子組件，當前組件爲父組件，router-view路由的爲子組件。
   
   
2. 父傳給子，子調用父的數據和方法

   方式1：通過props，使用:aaa='go'的方式，aaa是自己定義的參數名，和子組件裏props中的參數名一致，go是父組件中的變量，它可以是一個數據也可以是一個方法，子組件中接收使用即可。
   方式2：通過$emit，僅用於方法的傳遞，傳遞方式由:aaa變爲@aaa，接收不用props，而是直接使用this.$emit('aaa','參數')

3. 子傳給父，父調用子的數據和方法
   傳遞方法：通過$refs，子組件中定義好方法alert，父組件在引用子組件時加上ref="child"，然後父組件在自己的methods中通過this.$refs.child.alert直接調用子組件的alert方法。
   傳遞數據：通過$emit，子組件中定義一個方法，方法體裏面通過this.$emit('change','changeMsg')定義一個change事件，然後在父組件中通過@change="alert"去監聽這個change事件，當事件觸發時，會通過alert實時把數據推送給父組件。

（二）兄弟組件通信

1. 藉助中央事件總線，在外部新建一個js文件，取名bus.js。

   import Vue from 'Vue'
   export default new Vue;

2. 分別在兩個兄弟組件中引入bus，並確保兩個兄弟組件被同一個父組件引用。

   import bus from '../bus.js';

3. 在兄組件中定義方法，方法體中通過bus.$emit寫一個send事件。

   <button @click="sendMsg">發送數據</button>
   sendMsg(){
     bus.$emit('send',this.a++)
   }
   

4. 在弟組件中的created裏通過bus.$on去監聽這個事件。

   created() {
       bus.$on('send',function (msg) {
         console.log(msg);
       })
   },

5. 也可以省略外部的bus.js文件，直接把總線放在main.js裏的vue實例中，使用時需要在bus前面加上this.$root。

   new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: {
     App
    },
     data:{
      bus:new Vue()
     }
   });
   

七、爲什麼vue組件中data必須是一個函數，而不能是對象的形式？

1. 首先看個例子

   new  Vue({
       el: '#app',
       template: `<div>{{demo}}</div>`,
       data: {
           demo: 123
       }
   })
   

2. 在new vue()中，data可以直接是一個對象，爲什麼在vue組件中，data必須是一個函數呢？我們大致可以通過js原型鏈來對比下：

   var Component = function() {};
   Component.prototype.data = {
       demo: 123
   }
   var component1 = new Component();
   var component2 = new Component();
   component1.data.demo = 456;
   console.log(component2.data.demo); // 456
   

3. 從上面可以看出，兩個實例都引用同一個對象，其中一個改變的時候，另一個也發生改變。每一個vue組件都是一個vue實例，通過new Vue()實例化，引用同一個對象，如果data直接是一個對象的話，那麼一旦修改其中一個組件的數據，其他組件相同數據就會被改變。而data是函數的話，每個vue組件的data都因爲函數有了自己的作用域，互不干擾。

八、爲什麼vue每個組件只能包含有一個根元素？官網解釋如下：