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}}