vue组件间传值的方法汇总（父子间、兄弟间）

1、组件间的传值

1.1 父组件向子组件传值

子组件自定义一个属性

父组件通过自定义属性绑定值

子组件调用自定义属性来拿到值

（1.1 完）

1.2 子组件向父组件传值

子组件自定义一个事件

父组件通过自定义事件绑定一个方法来接收值

（1.2 完）

1.3 兄弟组件间传值（或者夸组件传值）

新建一个js文件作为兄弟组件间传值的中转站（new 一个vue）

组件1把值先传到bus

组件2从bus接收值

（1.3 完）

【完整代码】

parent.vue（父组件）

<template>
  <div class="container">
    <div class="header">
      <h1>parent</h1>
      <input v-model="toChildren" type="text"/>
      <h1 class="getData">{{getChildren}}</h1>
    </div>
    <div class="main">
      <div class="children1">
        <!--父传子：通过自定义属性绑定向子组件传的值-->
        <Children1 :getData="toChildren"></Children1>
      </div>
      <div class="children2">
        <!--子传父：通过自定义事件绑定一个方法，用于接收子组件传的值-->
        <Children2 @toParent="getChildrenData($event)"></Children2>
      </div>
    </div>
  </div>
</template>

<script>
  import Children1 from './children1'
  import Children2 from './children2'
    export default {
        name: "parent",
      components:{
        Children1,
        Children2
      },
      data(){
          return {
            toChildren:'',
            getChildren:''
          }
      },
      methods:{
          getChildrenData(data){
            this.getChildren = data;
          }
      }
    }
</script>

<style scoped>
  body{
    background: #eee;
  }
  .container{
    width: 100%;
  }
  .header{
    width: 100%;
  }
  .main{
    width: 985px;
    margin: 50px auto;
  }
  .children1,.children2{
    width: 40%;
    height: 300px;
    margin: 0 20px;
    display: inline-block;
    background: #909399;
    color: #fff;
  }
  .getData{
    color: darkred;
    height: 50px;
  }
</style>

children1.vue 子组件1

<template>
  <div>
    <h3>children1</h3>
    <h1>{{getData}}</h1>      <!--父组件传过来的值，在这展示-->
    <input type="text" v-model="toBrother" >
    <button @click="dataToBrother">toBrother</button>
  </div>
</template>

<script>
  import bus from '../eventBus/bus'
    export default {
        name: "children",
      props:['getData'],    //子组件自定义一个属性
      data(){
          return {
            toBrother:''
          }
      },
      methods:{
        dataToBrother(){
          bus.$emit('toBrother',this.toBrother)
        }
      }
    }
</script>

<style scoped>
  h1{
     height: 50px;
    color: darkred;
   }
</style>

children2.vue 子组件2

<template>
  <div>
    <h3>children1</h3>
    <h1>{{dataFromBrother}}</h1>
    <input type="text" v-model="toParentData">
    <button @click="dataToParent">toParent</button>
  </div>
</template>

<script>
  import bus from '../eventBus/bus'
    export default {
        name: "children2",
      data(){
          return {
            toParentData:'',
            dataFromBrother:''
          }
      },
      created(){
          bus.$on('toBrother',(data)=>{
            this.dataFromBrother = data;
          })
      },
      methods:{
        dataToParent(){
          this.$emit('toParent',this.toParentData)
        }
      }
    }
</script>

<style scoped>
  h1{
    height: 50px;
    color: darkred;
  }
</style>

bus.js

import Vue from 'vue'

export default new Vue

（完）

vue2.0使用路由传值

来源：CSDN

作者：蔚莱先森

链接：https://blog.csdn.net/Mr_JavaScript/article/details/81476834

标签

vue

方法汇总