vue引入组件

使用自定义组件：

1.、定义bar.vue组件

     bar.vue

2.、注册组件

    2.1 局部注册：在某个vue组件中引入即可

import Bar from ”@/view/components/bar.vue”
components:{
  Bar
}

   2.2 全局注册：在main.js文件中引入即可

import Bar from ”@/view/components/bar.vue”//引入组件
Vue.component('Bar',Bar )//注册组件

3.在template中以标签的方式插入组件

<bar></bar>

注意:如果以驼峰命名法，则以标签使用时驼峰需要小写

例如: 注册的组件名为TabBar
则，使用时应为<tab-bar></tab-bar>

4.组件间传值：父组件通过 prop给子组件下发数据，子组件通过事件给父组件发送消息

 4.1 父组件通过 prop给子组件传值:

   第一步：在父组件的子组件标签上绑定变量与赋值（:title="title" :title为变量 ="title"是变量的值）。

   第二步：在子组件中用props接受变量值

   第三步：在子组件中展示

 父组件：

<template>
  <div>
    <h1>我是父组件</h1>
    <!-- ：title与子组件prop中的名称一致  =”title“ 与父组件中data数据中的title一致 -->
    <children :title="title" :contents="content"></children>
  </div>
</template>>
<script>
import bar from "./bar";
export default {
  data() {
    return {
      title: "我是父组件的标题",
      content: "我是内容"
    };
  },
  components: {
    bar
  }
};
</script>

 子组件：

<template>
  <div>
    <h1>children</h1>
    <span>{{title}}</span>
    <br />
    <span>{{contents}}</span>
  </div>
</template>>
<script>
export default {
  props: {
    title: String,
    contents: String
  }
};
</script>>

4.2  子组件通过事件给父组件传值：

   第一步：子组件定义一个事件，且通过emit调用父组件监听方法并传参：

   第二步：在父组件的子组件标签上绑定一个监听方法：<bar @listenChildEvent="recvMsg"></bar>

   第三步：通过方法传参的方式把子组件参数传递到父组件中。

父组件：

<template>
  <div class="father">
    <!--@listenChildEvent 监听子组件方法  ="recvMsg" 对应父组件对应方法-->
    <bar @listenChildEvent="recvMsg"></bar>
  </div>
</template>
<script>
import bar from '@/components/bar'
export default {
  components: {
    bar 
  },
  data () {
    return {}
  },
  methods: {
    recvMsg (msg) {
      console.log(msg)
    }
  }
}
</script>

子组件：

<template>
  <div class="child">
    <button @click="sendMsgToFather">click me</button>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    sendMsgToFather () {
      <!--通过emit调用父组件方法并传参 -->
      this.$emit('listenChildEvent', 'this msg is from child')
    }
  }
}
</script>

5.组件传递事件：

 5.1 ，父组件调用子组件方法：

    直接调用：this.$refs.child.sing();

 5.2 ，子组件调用父组件方法：

    直接调用：this.$parent.clickMe()

引入全局echarts

1.安装echarts

npm install echarts --save
 
有淘宝镜像的可以选择  (安装速度快)
cnpm install echarts --save

2.在main.js中导入echarts

import * as echarts from 'echarts'; 

3. 挂载到vue实例中

Vue.prototype.$echarts = echarts;

4.在组件中使用

<div ref="chart" id="chart" style="width: 100%;height:400px;"></div>
 var myChart = this.$echarts.init(this.$refs.chart);