vue组件传值

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

1.子组件在props中创建一个属性，用以接收父组件传来的值
2.父组件中注册子组件
3.在子组件标签中添加子组件props中创建的属性
4.把需要传给子组件的值赋给该属性
父组件：Father.vue

<template>
    <div>
          父组件:
        <input type="text" v-model="name">
        <br>
        <son :inputName = "name"></son>
    </div>
</template>
<script>
// 引入子组件
import son from './components/son'
    export default {
        components:{
            son // 注册子组件
        },
        data() {
            return {
                name:''
            }
        }
    }
</script>

子组件：son.vue

<template>
    <div>
        我是子组件
        {{inputName}}
    </div>
</template>
<script>
    export default {
         props: {
          inputName: String,
          required: true
        }
    }
</script>

效果：

父子传值效果.gif

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

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
在子组件中创建一个按钮，给按钮绑定一个点击事件
在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数
子组件:child.vue

<template>
    <div>
        我是子组件：
        {{childValue}}
        <!-- 定义一个子组件传值的方法 -->
        <input type="button" value="点击触发" @click="childClick">
    </div>
</template>
<script>
    export default {
        data () {
          return {
            childValue: '我是子组件的数据'
          }
        },
        methods: {
          childClick () {
            // childByValue是在父组件on监听的方法
            // 第二个参数this.childValue是需要传的值
            this.$emit('childByValue', this.childValue)
          }
        }
}
</script>

父组件：Father.vue

<template>
    <div>
    父组件:
    <span>{{name}}</span>
    <br>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <child @childByValue="childByValue"></child>
    </div>
</template>
<script>
// 引入子组件
import child from './components/child'
    export default {
        components:{
            child // 注册子组件
        },
        data() {
            return {
                name:''
            }
        },
         methods: {
        childByValue: function (childValue) {
        // childValue就是子组件传过来的值
        this.name = childValue
      }
    }
}
</script>

效果：

子父传值效果.gif

三、 vue 组件间传值（兄弟）（bus方式）

bus方式的组件间传值其实就是建立一个公共的js文件，专门用来传递消息
1.建立公共文件，并引入
新建Bus.js文件。只需两句代码。

 import Vue from 'vue'
 export default new Vue;

然后在需要传递消息的两个组件引入

import Bus from '@/components/utils/Bus.js';

2.发送消息

触发组

Bus.$emit('msg', _this.examineNum);

3.接受消息
　　接受组件的事件：
　写在钩子函数内：例如：mounted created都可以

  Bus.$on('msg', (e) => {
   this.examineNum = e;
 })