vue 朝花夕拾系列（3）- 组件通信props、$emit/$on

vue 朝花夕拾系列（3）主要收录的就是vue组件间通信的几种方式，如
1.props、$emit/$on
2.vuex
3.$parent/$children
4.$refs
5.$root
6.$attrs/$listeners
7.provide/inject
8.中央事件bus(eventBus)
9.路由传参

本文主要阐述第一种：props、$emit/$on的方式进行数据的属性下发和事件广播/监听的方式进行接收…

父传子props/子传父$emit发送事件$on监听

• 这也是最常规的通信方式，如果跨层级也可以一层一层传递下发props，然后一层一层emit事件通过监听获取子组件的数据.

props的配置项

// children.vue子组件
// props:['props1Name','props2Name',], 不建议这么写
   props:{
       props1Name:{
           type:'String', // props类型 String/Number/Boolean/Function/Object/Array/Symbol
           required:false, // 是否必填
           default:'props1',  // 默认参数
       },
       //对象或数组的默认值必须从一个工厂函数返回。当一个函数返回一个对象时，我们称之他为 工厂函数(factory function) 。
       props2Name:{
            type:'Object',
            default:  function () {
               return { message: 'hello' }
           }
       },
        // 自定义验证函数
       props3Name: {
           validator: function (value) {
               return value > 10
           }
       }，
        // 函数
       props4Name: {
           type:Function,
           default:()=>{}
       }，
       // 数组
       props5Name: {
           type: Array,
           // 对象或数组默认值必须从一个工厂函数获取
           default: () => []
       }
   },// 组件绑定的属性

   // 父组件father.vue
   <div>
       <p>我是父组件<p>
       <children :props1Name="props1Name" 
                 :props2Name="props2Name" 
                 :props3Name="props3Name" 
                 :props4Name="props4Name" 
                 :props5Name="props5Name" 
       />
   </div>

需要注意的点:

props传递是单向的，只能从父组件流到子组件,所以不能直接在子组件中修改props的值(可以通过计算属性将props通过get/set存储成子组件的局部变量,然后修改使用)

// 父组件
<children :isShow="isShow" />

// 子组件中
<template>
    <Modal v-model="showModal" @on-cancel="closeModal">
    </Modal>
</template>
export default{
    props:{
        isShow:{
            type:Boolean,
            required:true,
            default:false
        }
    },
    computed:{
        showModal:{
            get(){
                return this.isShow
            },
            set(val){}
        }
    },
    methods:{
        closeModal(){
            this.showModal = false;
        }
    }
}

$emit

// father.vue
<children @emitEventName ="emitEventHandler" />
emitEventHandler(event){
    // 可以接收发过来的参数，默认是事件对象
}

// children.vue
this.$emit('emitEventName');// $event默认参数传递事件对象
this.$emit('emitEventName',params);//可以传递params参数