vue组件之间的传参

vue组件之间传参有三种传参方式'父传子','子传父','非父子组件之间传值'

父传子

• 父组件

<template>
  <CounterCom :num="5"></CounterCom>
</template>

<script>
 import CounterCom from './components/CounterCom.vue'
 export default{
     components:{CounterCom}, // 引用组件
     data(){
        return{
          msg:"vue-脚手架写大项目",
       }
    }
 }
</script>

<style scoped>
</style>

• 子组件

<template>
  <div>{{num}}<div>
</template>

<script>
export default{      
  props:{
    "num":{
      type: Number,
      default:1     
    },
    "age":{
      type: Number, 
      required：true
    }
  },
}
</script>

<style scoped>
</style>

• type: 子组件接收的值可以为Number、String、Boolen、Array、Object、Function,也可以接收多种类型值如: [Number,String]

• default:

  1.default定义默认值,如果父组件有传值，则用父值渲染。如果父组件没有传值，则使用默认值

  2.父子组件传值时default不能直接定义成空数组或空对象，需要用工厂函数return返回一个默认值

<script>
export default{      
  props:{
    num :{
      type: Array,
      default: function () {
        return {}
      }
     },
     changePage: {
        type: Array,
        default: () => {}
     }
  },
}
</script>

• required: required为true时定义为必传项,

• 自定义验证函数

为 props 属性指定 自定义的验证函数 ，从而 对 prop 属性的值进行更加精确的控制

export default {
   props : {
     D : {
       fun(value) {
        //这个函数表示：D必须匹配'aa','bb','cc'里其中一个
        //fun函数返回为true表示验证通过，false则表示验证失败
         return ['aa','bb','cc'].indexOf(value) !== -1
           }
         },
       },
   }

子组件传父组件

• 子组件

<template>
  <div>
    <h2>{{name}}</h2>
    <h2>{{age}}</h2>
    <button @click="giveName">点我传递姓名</button>
  </div>
</template>

<script>
export default {
    name:'Student',
    props:['receive'],
    data(){
      return{
        name:'张三',
        age:18
      }
    },
    methods:{
      giveName(){
        // 调用自定义事件，传入参数
        this.$emit('getName',this.name)
      }
    }
}
</script>

• 父组件

<template>
  <CounterCom @getName= ""></CounterCom>
</template>

<script>
 import CounterCom from './components/CounterCom.vue'
 export default{
     components:{CounterCom}, // 引用组件
     data(){
        return{
          name: ""
       }
    },
    methods:{
      giveName(e){
         this.name = e
      }
    }
 }
</script>

总结: 子传父主要通过 this.$emit()方法传值,其中有两个参数,第参数一个为传递事件名称,第二个为传递的参数,父组件通过v-bind事件接收子组件传递过来的值

非父子组件之间传值

非父子组件之间传值，需要定义个公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

bus文件可以理解为组件A和B的父组件，组件A注册一个事件上浮给bus文件，组件B在bus文件下监听事件

// bus.js
import Vue from 'vue'
export default new Vue()

<template>
<div>
  A组件:
  <span>{{elementValue}}</span>
  <input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
 
<script>
import Bus from './bus'
export default {
  name: 'ChildInfo',
  data () {
    return {
      elementValue: 10
    }
  },
  methods: {
    elementByValue: function () {
      Bus.$emit('val', this.elementValue)
    }
  }
}
</script>
 
<style scoped>
 
</style>

<template>
<div>
  B组件:
  <span>{{elementValue}}</span>
</div>
</template>
 
<script>
import Bus from './bus'
export default {
  name: 'ChildInfo2',
  data () {
    return {
      elementValue: 0
    }
  },
  mounted: function () {
    var that = this
    // 用$on事件来接收参数
    Bus.$on('val', (data) => {
      that.elementValue = data
    })
  },
  methods: {
  }
}
</script>
 
<style scoped>
 
</style>

vue中非父子组件之间通信除了使用bus总线，也可以使用vuex，两者适用场景不同。

bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。