Vue中关于组件传值的知识点

Vue组件传值在日常开发中比较常见，在官方文档里面也有介绍，但是对于新手理解起来会有一点生涩。所以今天就把Vue组件传值拉出来写一次，方便新手理解和自己的记忆。
一般有三种传值方式：1.父传子、2.子传父、3.兄弟组件之间通信

1、Vue中父组件向子组件传值

一般会在子组件里面定义props来做接收父组件的值，通常是比较常见的。
父组件（在这里，父组件的名字是：Main.vue）

<template>
  <div>
    <h3>我是父组件</h3>
    <Header v-bind:msg="msg"></Header>
  </div>
</template>

<script>
// 引入子组件的组件
import Header from "./Header";
export default {
  data() {
    return {
      msg: "我是父组件向子组件传的值"
    };
  },
  // 注册组件
  components: {
    Header
  }
};
</script>

<style>
</style>

从上面可以看出：
我在父组件的Header标签上绑定一个v-bind:msg，那么在子组件上就需要定义一个msg用来接收父组件传进来的参数，可以看下面的代码：
子组件（在这里，父组件的名字是：Header.vue）

<template>
    <div>
        Header组件即子组件:{{msg}}
    </div>
</template>

<script>
export default {
    props:{//props验证
        msg:{
            type:String
        }
    }
}
</script>

<style>
    
</style>

父传子的效果：

2、Vue中子组件向父组件传值

这时候就需要利用vue中的$emit将想要传递的值通过函数的形式传出，在父组件接收值

this.$emit(arg1,arg2) arg1:方法名字，arg2:要传出的值

字传父的子组件(名字是：Message.vue):

<template>
    <div>
        <h1>这是子传父的子组件</h1>
        <div>要向父组件传的值:{{msg}}</div>
        <button @click="toParent">点击向父组件发送消息</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            msg:"我要向父组件传的值"
        }
    },
    methods:{
        toParent(){
            this.$emit("toChildren",this.msg)
        }
    }
}
</script>

<style>
    
</style>

我在button上绑定了一个点击事件，函数里面传出了一个方法名为toParent的方法，这时候我们就要去父组件接收这个函数，它会带一个返回值，这个返回值就是我们需要从子组件传的值。
父组件（Main.vue）

<template>
  <div>
    <h1>我是父组件</h1>
    <div>接受子组件的值：{{msg}}</div>
    <Message @toChildren="getMsg"></Message>
  </div>
</template>
<script>
// 引入子组件
import Message from "./Message";
export default {
  data() {
    return {
      msg:""
    };
  },
  // 注册
  components: {
    Message
  },
  methods: {
    getMsg(msg) {
      //参数msg就是用于接收子组件的值
      this.msg = msg;//拿到子组件的msg信息
    }
  }
};
</script>

<style>
</style>

此时我在父组件里面定义了一个@toChildren方法这个名称要和子组件里面this.$emit(arg1)的命名一样，用来接收。在getMag里面接收一个参数就是当前传回的值。
子传父的效果：
这是没有点击的情况：

点击之后的效果：

3、兄弟之间的传值

兄弟组件之间就需要一个中间值，在这里我用Main.vue来充当中间值。
先来看看兄弟之间传值的示意图：

Main.vue组件(父组件)：

<template>
  <div>
    <h1>我是父组件</h1>
    <!--同级之间的通信 -->
    <Header @m="getMsg"></Header>
    
    <Message :msg="msg"></Message>
  </div>
</template>

<script>
// 引入子组件
import Header from "./Header";
import Message from "./Message";
export default {
  data() {
    return {
      msg: ""
    };
  },
  // 注册
  components: {
    Header,
    Message
  },
  methods: {
    getMsg(msg) {
      //参数msg就是用于接收子组件的值
      this.msg = msg; //拿到子组件的msg信息
    }
  }
};
</script>

<style>
</style>

解释：在这里Header标签就是一个子组件，而Main.vue就是父组件，<Header @m="getMsg"></Header>"就相当于是子组件向父组件传值，具体的操作看下面的代码:
Header组件(子组件）：

<template>
  <div>
    Header组件:{{msg}}
    <button @click="send">Header点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello"
    };
  },
  methods: {
    send() {
        this.$emit('m',this.msg)
    }
  }
};
</script>

<style>
</style>

解释：在Header.vue组件中用button按钮实现点击事件<button @click="send">Header点击</button>,在methods中用send的方法：this.$emit('m',this.msg)拿到msg的值，给到Main.vue组件中，现在Main.vue组件中的msg就拿到msg的值：hello
Message组件(子组件）：

<template>
    <div>
        Message组件:{{msg}}
    </div>
</template>

<script>
export default {
    props:{
        msg:{
            type:String
        }
    }
}
</script>

<style>
</style>

解释：在这里的话，Main.vue就是一个父组件，而Message.vue就是一个子组件，这里用的是父组件向子组件传值，在上面的代码中Main.vue组件已经拿到msg的值(hello),把值通过父传子，传给Message.vue。
兄弟之间的通信的效果：
没有点击的效果：

点击之后的效果：

通过上面的代码就可以拿到Header.vue的msg的值（hello），这就是兄弟传值，需要一个中间值来实现传值。