Vue自定义组件及传值方式

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

2.组件使用过程
在App.vue：

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

组件中：

<!-- 接收数据 -->
<div class="hello">
    <h1>{{ msg }}</h1>
</div>
export default {
  name: 'HelloWorld',
  },

传值方式*

1. 父传子（用props属性）
   ①在父组件APP.vue的helloworld写入你要传的数据

<HelloWorld msg="vue基础" msg2="父传子组件"/>

②子组件接收数据：

<h1>{{ msg }}--{{msg2}}</h1>
//子组件数据类型
props: {
    msg: String,
    msg2: String
  },

2 .子传父（用emit方法 v-on接收）
子组件：

    <!-- 子传父 -->
    <span>{{childValue}}</span>
    <!-- 定义一个子组件传值的方法 -->
    <input type="button"
           value="点击触发传值"
           @click="childClick">
    //点击事件
    //触发之后去父组件找childByValue事件
    childClick() {
      //   childValue是在父组件中on监听的方法
      //   第二个参数是需要传的值
      this.$emit('childByValue', this.childValue)
    },

App.vue:

//在调用该组件时触发childByV事件alue接收值
<comtest v-on:childByValue="childByValue" />
<h4>{{childValues}}</h4>

data(){
      return{
         childValues:'子组件传给父组件的值'
      }
  },
//   子传父要先定义方法传形参
  methods:{
      childByValue:function(childValue){
        //   childValue就是子组件传过来的值
          this.childValues=childValue
      }
  }

3 子传子
（1）新建一个bus.js文件

import Vue from 'vue'
export default new Vue()

（2）a组件

    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="onClick">

// 要引入公共的bug，来做为中间传达的工具
  import Bus from './bus.js'
  export default {
    data () {
      return {
        value: 1
      }
    },
    methods: {
      onClick: function () {
        Bus.$emit('val', this.Value)
      }
    }

（3）b组件

<input type="button" value="点击触发" @click="getData">
<span>{{name}}</span>

//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++
      }
    }

``