vue單文件組件

vue單文件組件

vue單文件組件就是把一個頁面拆分成為多個、多層次的組件。通過多層引用，大大縮小vue文件的長度和頁面復雜度。

步驟：

父組件：

1.引入組件

 import tabcard from 'components/tabcard.vue';

2.配置組件

export default {
components: {
    tabcard
  }
}

3.使用組件

<tabcard></tabcard>

子組件：

1.制作子組件

　　子組件就是正常的vue文件。

父組件向子組件傳值：

父組件：

1.在子組件標簽上傳入數據

<tabcard :tabcarddata="largeclass"></tabcard>//tabcarddata為數據名稱，largeclass為json數據

子組件：

1.子組件通過props接受數據

export default {
  props: {
    tabcarddata: {}
  }
}

2.數據調用

{{tabcarddata.name}}

子組件向父組件傳值：

父組件：

父組件向子組件傳遞一個方法

<datePickers  v-on:datatime="datatime" >

該方法為：（作用為將方法獲取的值賦值給data）

datatime(theTime){
        this.modifyModel.DJSJ = theTime;
      }

子組件：

在子組件調用父組件的方法，將值通過父組件傳遞的方法傳給父組件。

this.$emit('datatime',this.date);

datatime為調用的方法名，

this.date為傳回去的參數。