Vue 基礎面試題（2）關於組件和非父子組件傳值

時間 2019-11-07

原文原文鏈接

1.父子組件傳遞參數

父組件向子組件傳遞參數：
兩種方式實現：vue

父組件在子組件的模板上定義一個屬性值，這個屬性值就是將要傳遞給子組件的數據

<template>
    <div>
      <v-content :childData="msg" :child-obj="childObj"></v-content>
    </div>
  </template>
  <script>
  import content from "./components/content";
  export default {
    components: {
      vContent: content
    },
    data() {
      return {
        msg: "向子組件傳遞的數據",
        childObj: {
          question: "向子組件傳遞的對象數據"
        }
      };
    }
  };
  </script>
複製代碼

子組件使用props對象進行父組件的數據接收，同時props能夠進行相關的屬性擴展vuex

<template>
   <div>
       {{childData}}
       {{childObj}}
   </div>
 </template>

 <script>
 export default {
   props: {
     childData: {
       type: String,
       required: true,
       default: "當父組件沒有傳遞數據的時候，默認值"
     },
     childObj: {
       type: Object,
       required: false,
       default() {
         return {
           msg: "因爲是對象，子組件必須使用return的方式返回一個默認值"
         };
       }
     }
   }
 };
 </script>
複製代碼

可得到父組件的數據值，可以進行使用，可是不推薦修改

父組件內部定義name屬性。子組件內部能夠訪問父組件的相關data

<script>
 import content from "./components/content";
 export default {
   name: "parent",  // 該屬性能夠在子組件內部訪問
   components: {
     vContent: content
   },
   data() {
     return {
       msg: "向子組件傳遞的數據",
       childObj: {
         question: "向子組件傳遞的對象數據"
       }
     };
   }
 };
 </script>
複製代碼

子組件內部使用this.$parent.data相關數據進行訪問

<script>
 export default {
   created() {
       // 能夠正常訪問父組件內部的數據值
       console.log(this.$parent.childObj);
   }
 };
 </script>
複製代碼

子組件向父組件進行數據的傳遞：bash
1. 在子組件內部經過自定義時間進行數據的發送
```
<script>
  export default {
    data(){
        return {
            childMsg:'子組件向父組件發送的數據'
        }
    },
    created() {
        // 建立自定義事件名稱，而且指定向父組件傳遞的數據值
        this.$emit('sendData2Parent',this.childMsg)
    }
  };
  </script>
複製代碼
```
父組件使用時間監聽進行子組件的數據獲取：app
```
<template>
   <div>
     <v-content 
     @sendData2Parent="getChildData"
     >
     </v-content>
   </div>
 </template>

 <script>
 import content from "./components/content";
 export default {
   components: {
     vContent: content
   },
   methods: {
       getChildData(val) {
           // val值爲默認的形參，當前子組件向父組件傳遞的數據值
           console.log(val)
       }
   },
 };
 </script>
複製代碼
```
1. 父組件使用extends屬性繼承子組件的數據值
```
<template>
    <div>
      <v-content></v-content>
    </div>
  </template>

  <script>
  import content from "./components/content";
  export default {
    name: "parent",  // 該屬性能夠在子組件內部訪問
    extends:content,
    created() {
        //直接取子組件中的data數據
        console.log(this.childMsg);
    },
    components: {
      vContent: content
    }
  };
  </script>
複製代碼
```
特色：函數

vue最大的優勢就是好維護，複用率高，其中最主要的緣由及時一個頁面是由不少個子組件拼接起來的，哪一個模塊須要優化改變，只須要去修改對應的組件便可。因此，各個組件之間確定是須要相互聯繫，相互通信的。優化

緣由：ui

單向數據流:單向數據流的規定：狀態只能從父組件向子組件進行傳遞，子組件使用props進行數據的接收，不推薦使用子組件進行父組件state的修改，這樣會致使多個組件依賴這個state，容易產生混亂，若是想要修改，首先向父組件發送通知，由父組件進行修改，子組件內部經過computed屬性來進行prop數據的過濾this

2.非父子組件傳遞參數

三種方式實現：spa
1. 使用中間件進行數據的傳遞，實現方法：
  - 1 定義一個新的Vue實例化對象，這個對象用老註冊與監聽要傳遞的自定義事件（自定義事件裏面包含了我們的傳遞的數據）插件
  - 2 在兩個相互共享數據的組件裏面分別引入這個中間件，保證是一個相同的vue實例化對象
  - 3 在要發送數據的頁面，進行事件的發佈 Vue.$emit('事件名稱',val)
  - 4 在接收這個數據的組件裏面，要作事件的監聽 Vue.$on('事件名稱',callback(val) => val === 傳遞的數據值)

使用插件（pubsub-js）來實現數據的傳遞，實現方法：

1 安裝插件、導入插件=> main.js文件導入這個插件，全局就可使用他的方法

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 導入這個插件
import PubSub from 'pubsub-js'
new Vue({
    render: h => h(App),
}).$mount('#app')
複製代碼

2 在要發送數據的組件內部使用pubsub的一個方法 publish方法

methods:{

        sendMsg() {
            // sendMsg => 本次的發佈的事件名稱
            // this.msg => 本次須要傳遞的數據
            PubSub.publish('sendMsg',this.msg)
        }
    }
複製代碼

3 在要接收數據的組件內部使用 pubsub的subscribe方法，進行數據的接收

created() {
  // sendMsg => 事件名稱 
  // 回調函數，有一個默認的形參，這個必需要有佔位
  // data就是咱們此次須要獲取的數據
PubSub.subscribe("sendMsg", (e, data) => {
  console.log(data);
});
複製代碼

}, ``` 3. 使用vuex進行數據的狀態管理