VUE单文件剖析

单个vue文件

 父组件：

    template部分：

  <div class="main-cell">
     <div class="line-charts-cell">
      <!-- 组件 -->
      <!-- ：topInfo="xxx" 父作用域将数据传到子组件 -->
      <!-- v-前缀作为一种视觉提示，用来识别模版中vue特定的特性，在某些指令中提供了简写，
        比如v-bind缩写 <a v-bind:href="url">...</a> , <a:href="url"> ... </a>,
        比如v-on缩写 <a v-on:click="doSomething">...</a> <a @click="doSomething">...</a>
       -->
      <TopItem @handleRadio="handleRadioLineCharts" :topInfo="lineChartsInfo"></TopItem>
      <BaseChartDraw :chartOptions="lineChartsInfoOpt"></BaseChartDraw>
    </div>
    <div class="charts-cell">
      <div class="charts-item">
        <TopItem @handleRadio="handleRadioSumCharts" :topInfo="sumChartsInfo"></TopItem>
        <BaseChartDraw :chartOptions="sumChartsInfoOpt"></BaseChartDraw>
      </div>
      <div class="charts-item">
        <TopItem @handleRadio="handleRadioSortCharts" :topInfo="sortChartsInfo"></TopItem>
        <BaseChartDraw :chartOptions="sortChartsInfoOpt"></BaseChartDraw>
      </div>
      <div class="charts-item">
        <TopItem @handleRadio="handleRadioSumCharts2" :topInfo="sumChartsInfo2"></TopItem>
        <BaseChartDraw :chartOptions="sumChartsInfoOpt2"></BaseChartDraw>
      </div>
    </div>
  </div>

 

  script部分：

 // 导入组件  组件的命名方式
 import TopItem from "./components/TopItem";
 import BaseChartDraw from "./components/BaseChartDraw";

 // 导入工具js
 import { getMoney } from "../../utils/priceUtil.js";

 export default {
    // 在vue里，一个组件的本质上一个拥有预定义选项的vue实例，在vue中注册组件
    components: {
       TopItem,
       BaseChartDraw
   }
    ...
 };

 

 

 子组件1  TopItem.vue

   template部分：

<div class="item-cell">
    <!-- 模版语法声明式地渲染DON -->
    <!-- 数据绑定到DOM文本或特性 Mustache语法，戏称小胡子语法 -->
    <!-- 对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持 -->
    <div class="item-name">{{topInfo.name}}</div>
    <div class="item-radio-cell">
      <!-- v-model 指令 实现表单输入和应用状态之间的双向绑定 -->
      <!-- 指令是带有v-前缀的特殊特性 ，指令的职责是当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM -->
      <!-- 
        v-bind指令可以响应式的更新HTML特性：
        <a v-bind:href="url">...</a>
        在这里href是参数，v-bind指令将该元素的href特性与表达式url的值绑定
       
        v-on指令可以监听DOM事件：
        <a v-on:click="doSomething">...</a> 在这里参数是监听的事件名
       -->
        <!-- 这里同时还涉及了Element UI的知识点 -->
         <!--  change 绑定值变化时触发的事件-->
       <el-radio-group v-model="radioValue" size="mini" @change="radioChange">
          <!-- v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 -->
          <!-- v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
               v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
               text 和 textarea 元素使用 value 属性和 input 事件；
               checkbox 和 radio 使用 checked 属性和 change 事件；
               select 字段将 value 作为 prop 并将 change 作为事件。
           -->
          <!-- :指令的意思是该元素节点lable特性和item.value保持一致 -->
          <!-- v-for指令可以绑定数组的数据来渲染一个项目列表 -->
          <!-- 建议尽可能在使用 v-for 时提供key属性，它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。 -->
          <!-- 不推荐在同一元素上使用 v-if 和 v-for -->
          <el-radio-button :label="item.value" v-for="(item,index) in topInfo.radioList" :key="index">{{item.name}}</el-radio-button>
          <!--  label Radio的value-->
          <!--  -->
        </el-radio-group>
    </div>
  </div>

 

  script部分：

export default{
    // 子单元通过pro接口与父单元进行良好的解耦
    props:{
      topInfo:{
        type:Object,
      }
    },
    // 当一个vue实例创建时，它将data对象中的所有属性加入到vue的响应式系统中。当这些属性的值发生变化时， 视图将会产生响应，即匹配新的值
    data(){
      return{
        radioValue:'1'
      }
    },
    // 每个vue实例在被创建时都要经过一系列的初始化过程，例如需要设置数据监听、编译模版、将实例挂载到DOM并在数据变化时
    // 更新DOM，
    // 同时在这个过程中也会执行一些叫做生命周期的钩子函数，这给了用户在不同阶段添加自己代码的机会。
    // created 钩子可以用来在一个实例被创建之后执行代码
    created() {
      this.radioValue = this.topInfo.radioList[0].value;
      this.$emit('handleRadio',{
        value:this.radioValue
      })
    },
    //  计算属性 是以解决页面中复杂逻辑运算
    //  关于计算属性和方法的比较在于缓存
    computed: {

    },
    //  不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this
    methods:{
      radioChange(){
        this.$emit('handleRadio',{
          // 回调参数 选中的radio label的值
          value:this.radioValue
        })
      }
    },
  }

 

 

  子组件2：BaseChartDraw.vue

    template部分：

<div class="pic-cell">
    <div class="pic-item" ref="chartCell"></div>
 </div>

 

  script部分：

 import echarts from 'echarts';
  export default{
    props:{
      chartOptions:{
        type:Object,
      }
    },

    // 自定义侦听器，vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化
    // 时执行异步或开销较大的操作时，这个方式比较常用
    watch:{
      // 如果chartOptions发生变化，这个函数就会执行，使用 watch 选项允许我们执行异步操作 ，设置中间状态，等等。
      chartOptions:{
        deep:true,   /* ？ */
        handler(nv,ov){
          console.log(nv)
          this.drawChart(nv);
        }
      }
    },
    methods:{
      drawChart(options){
        let temp = echarts.init(this.$refs.chartCell);
        temp.clear();
        temp.setOption(options);
      }
    }
  }