一、父向子传参

父组件parent.vue：

引入子组件，通过v-bind传参

<template>
    <div class="myVue">
        <children :data="msg"></children>
    </div>
</template>
<script>
import children from './children'
export default {
  name: 'parent',
  data () {
    return {
      msg: '父传子'
    }
  },
  components: {
    children
  }
}
</script>

子组件children.vue

通过props引入所传参数

<template>
 <div>{
   
   {data}}</div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: ['data']
}
</script>
<style lang="less" scoped>
  div {
    font-size: 40px;
  }
</style>

props还可以对参数进行验证：

 props: {
      data: {
          type: String,   // 传入类型
          required: true, // 是否必须
          default: ''     // 默认值
      } 
  }

二、子向父传参

子组件：children.vue

通过v-on绑定的函数，在函数里用 this.$emit 传参

<template>
 <div @click="func">点击向父组件传参</div>
</template>

<script>
export default {
  data () {
    return {
      msg: '子向父'
    }
  },
  methods: {
    func () {
      this.$emit('funcParent', this.msg)
    }
  }
}
</script>
<style lang="less" scoped>
  div {
    font-size: 40px;
  }
  div:hover {
    cursor: pointer;
  }
</style>

父组件：parent.vue

通过v-on接受传进来的函数，并在自定义函数中接受参数

<template>
    <div class="myVue">
        <children @funcParent="func"></children>
    </div>
</template>
<script>
import children from './children'
export default {
  name: 'parent',
  data () {
    return {
    }
  },
  components: {
    children
  },
  methods: {
    func (data) {
      console.log(data)
    }
  }
}
</script>

补充知识：

$emit是挂载在vue实例上的事件方法，使用方式：

vm.$emit( eventName, […args] )

参数：eventName是触发的事件名称 (string) ， […args]是带的多个参数

作用：触发当前实例上的eventName事件，将所带参数传给监听器回调

三、兄弟组件之间传参

方式一：父组件中转

这个方式很好理解，但是比较麻烦，就是将某一子组件中的参数先通过v-on 与 $emit() 传给父组件，父组件再通过v-bind传给另一个子组件，相信大家都会，此处部分代码省略。

方式二：借助于事件车，通过事件车的方式传递数据

在自己喜欢的位置建立一个js文件，我这取名为bus.js，创建一个Vue的实例，让各个兄弟共用同一个事件机制，内容如下：

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

在传递参数的兄弟组件 children.vue 中：

通过 Bus.$emit 将参数传给函数 funcBrother

<template>
  <div>
      <button @click="func">点击按钮向兄弟组件children传值</button>
  </div>
</template>

<script>
import Bus from '../bus'
export default {
  data () {
    return {
      x: 1
    }
  },
  methods: {
    func () {
      Bus.$emit('funcBrother', this.x++)
    }
  }
}
</script>
<style lang="less" scoped>
  div {
    font-size: 40px;
  }
  div:hover {
    cursor: pointer;
  }
</style>

在接受的兄弟组件 brother.vue 中:

通过 Bus.$on 接收传过来的值

<template>
 <div>
    第{
   
   {msg}}次
 </div>
</template>

<script>
import Bus from '../bus'
export default {
  data () {
    return {
      msg: 0
    }
  },
  created () {
    Bus.$on('funcBrother', (val) => {
      this.msg = val
    })
  }
}
</script>

方式三：直接把需要的参数放在 localStroage 或 sessionStroage

这个就是存入取出的工作，同时注意两者的区别，可见LocalStorage和sessionStorage的区别。但是用这种方式存储的话一定要注意几个问题：

存储空间有限，不需要永久存储的东西在使用完毕之后及时清除
由于是全局使用，所以要合理使用命名空间，防止key重复污染等问题，最后事先约定好，或者写在README里
可能在多个组件中都需要存入取出操作，所以耦合度高，在修改时就很麻烦，最后封装成函数处理

vue组件间传参方式

一、父向子传参

二、子向父传参

三、兄弟组件之间传参

猜你喜欢