史上最全Vue的组件传值

父传子如何传递

1.父组件parent代码如下：

  <template>
    <div class="parent">
      <h2>{
  { msg }}</h2>
      <son psMsg="父传子的内容:叫爸爸"></son> <!-- 子组件绑定psMsg变量-->
  </div>
  </template>
  <script>
  import son from './Son' //引入子组件
  export default {
    
    name: 'HelloWorld',
    data () {
    
      return {
    
        msg: '父组件',
      }
    },
    components:{
    son},
  }
  </script>

2.子组件son代码如下：

  <template>
    <div class="son">
      <p>{
   {
    sonMsg }}</p>
      <p>子组件接收到内容：{
   {
    psMsg }}</p>
    </div>
  </template>
  <script>
  export default {
   
    name: "son",
    data(){
   
      return {
   
        sonMsg:'子组件',
      }
    },
    props:['psMsg'],//接手psMsg值
  }
</script>

子传父如何传递

通过绑定事件然后及$emit传值

1.父组件parent代码如下

 <template>
    <div class="parent">
      <h2>{
   {
    msg }}</h2>
      <p>父组件接手到的内容：{
   {
    username }}</p>
      <son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son>  <!--绑定自定义事件transfer-->
    </div>
  </template>
  <script>
  import son from './Son'
  export default {
   
    name: 'HelloWorld',
    data () {
   
      return {
   
        msg: '父组件',
        username:'',
      }
    },
    components:{
   son},
    methods:{
   
      getUser(msg){
   
        this.username= msg
      }
    }
  }
  </script>

2.子组件son代码如下：

 <template>
    <div class="son">
      <p>{
   {
    sonMsg }}</p>
      <p>子组件接收到内容：{
   {
    psMsg }}</p>
      <!--<input type="text" v-model="user" @change="setUser">-->
      <button @click="setUser">传值</button>
    </div>
  </template>
  <script>
  export default {
   
    name: "son",
    data(){
   
      return {
   
        sonMsg:'子组件',
        user:'子传父的内容'
      }
    },
    props:['psMsg'],
    methods:{
   
      setUser:function(){
   
        this.$emit('transfer',this.user)//将值绑定到transfer上传递过去
      }
    }
  }
  </script>

Vue兄弟组件传参

介绍：
eventBus又称为”事件总线"，它是一种沟通的桥梁。桥梁的两端通过事件总线可以进行交互，传播数据。

1.在src文件中创建Bus.js文件，然后抛出一个空的Vue实列

操作如下：

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

2.然后，在传输的一方，导入Bus.js文件，在当前组件的方法中用Bus.$emit(“方法名”,要传送的值)进行传参；

兄弟组件一操作如下 :

<template>
  <div>one组件
      <input v-model="oneMsg" />
      <button @click="transmit"></button>
  </div>
</template>
<script>
import Bus from "@/common/bus" //导入Bus.js
export default {
   
  data() {
   
    return {
   
      oneMsg: '我是兄弟组件一'
    }
  },
   methods() {
   
   // 1.$emit发送消息oneMsg
   transmit(){
   
    Bus.$emit("msg", this.oneMsg);
  }
}
</script>

3 . 再然后，在接收的一方，导入Bus.js文件，在当前组件的方法中用Bus.$on(“方法名”，(data)=>{//回调返回的参数信息})

兄弟组件二操作如下：

<template>
  <div>{
   {
   twoMsg}}</div>
</template>
<script>
import Bus from "@/common/bus"
export default {
   
  data() {
   
    return {
   
      twoMsg: ''