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为传回去的参数。