Vue怎样定义组件及组件的传值

1.vue自定义组件
1、在src中components中,新建Header.vue组件（首字母大写）

2、打开Header.vue*

3、在app.vue中引用组件

// 第一步引入组件
import Header from './components/Header.vue'
// 第二步在export default注册组件
  components: {
    Header
  }
<!-- 第三步使用组件 -->
<Header></Header>

2.vue三种传值
Vue常用的三种传值方式有：

1.父传子

2.子传父

3.非父子传值
父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

1. 父组件向子组件进行传值
父组件：

子组件：

2. 子组件向父组件传值
子组件：


父组件：


3. 非父子组件进行传值
非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

//bus.js
import Vue from 'vue'
export default new Vue()

<template>
  <div>
    A组件:
    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug，来做为中间传达的工具
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue: function () {
        Bus.$emit('val', this.elementValue)
      }
    }
  }
</script>
<template>
  <div>
    B组件:
    <input type="button" value="点击触发" @click="getData">
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted: function () {
      var vm = this
      // 用$on事件来接收参数
      Bus.$on('val', (data) => {
        console.log(data)
        vm.name = data
      })
    },
    methods: {
      getData: function () {
        this.name++
      }
    }
  }
</script>