VUE 目录结构，基本使用

<template>  

    {{level|levelFilter}}
     <!--level 使用levelFilter数据格式化-->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  <!--@refreshDataList 注册到子组件，子组件调用-->
</template>

<script type="text/javascript">
  import AddOrUpdate from './category-add-or-update' /*引用组件*/
  import {
    getOrderSetting
  } from '@/api/orderSetting'; /*引用方法*/

  var _self;

  export default {
    data() {
      return {
        dataForm: {
          key: '',
          addOrUpdateVisible: false, //控制子组件显示隐藏
        },
      }
    },
    /*子组件专用*/
    props: {
      value: Object, //接收父页面通过 v-model传来的值
      isEdit: {
        type: Boolean, //定义数据类型
        default: false
      }
    },
    components: { //注册组件模块
      AddOrUpdate /*注册组件*/
    },
    /*自己定义的变量，用于组件数据绑定*/
    computed: {
      detailHtml_Temp() {
        return this.value.detailHtml_Temp;
      },
      selectSubject: {
        get: function() { 
          return subjects;
        },
        set: function(newValue) { 
          
        }
      },
    },
  },
  /*监控自定义变量*/
  watch: {
      detailHtml_Temp: {
        immediate: true,/*页面创建即运行*/
        deep: true,/*深度监控*/
        handler(val, oldVal) {
           
        },
      },
    },
    /*方法模块*/
    methods: { 
      getDataList() {
        this.$emit('refreshDataList'); /*子组件专用，调用父页面传来的参数*/
      },
    },
    /*初始化模块，进入页面触发*/
    activated() {
      this.getDataList() //调用内部方法
    },
    /*初始化模块    渲染前触发   只触发一次*/
    created() {
      _self = this; /*this赋予_self 方便在ajax等方法内部回调*/
    },
    /*格式化数据模块*/
    filters: {
      levelFilter(value) {
        if (value === 0) {
          return '一级';
        } else if (value === 1) {
          return '二级';
        }
      }
    }
  }
</script>