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监听事件。

巴特西

vue组件之间的传参

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

父传子

子组件传父组件

非父子组件之间传值

最新文章

热门文章