Vue引用其他組件，但組件某些部分不需要時的簡單處理

項目開發時，我們會把多個地方重復使用的模塊抽象成組件，提供給大家一起使用，但是使用組件的時候偶爾會遇見一些問題，比如說組件里只有某些東西自己並不需要，這個時候我們可以對組件進行簡單的修改，而不影響其他人的使用。

 

這里有一個方法，舉個例子簡單說明一下。

 

我們在頁面上引入一個其他組件，然后給組件傳入一個狀態值。

頁面

<template>
  <div>
    <show-my-test :state="true"></show-my-test>
  </div>
</template>

<script>
  import showMyTest from '~/components/showMyTest.vue';
  export default {
    name: 'index',
    components: {
      showMyTest: showMyTest
    }
  };
</script>

<style scoped>

</style>

組件通過props獲取Boolean類型的值，如果沒有獲取到值則會默認為false，我們可以通過這個來解決一些問題。

組件

<template>
  <div>
     <div>
       <p>今天是周一！</p>
     </div>
     <div v-if=“!state”>
       <p>今天天氣不錯</p>
     </div>
  </div>
</template>

<script>
  export default {
    name: 'index',
    props: {
      state: {
        type: Array
     }
  };
</script>

<style scoped>

</style>

這樣的話，在使用上面這個組件的時候，如果沒有給組件傳state的值，則今天天氣不錯那里正常顯示，不影響使用，如果給組件傳了一個true的值，則這一塊則不會顯示。

 

通過這樣的方法可以解決挺多組件復用時候產生的問題，這里只是一個簡單的例子，實際問題應該根據需求來處理。

 

恩，就醬～