vue3+ts学习(十六):vue2父子组件通信

84 阅读1分钟

父传子:props属性

image.png type的类型可以是String\Number\Boolean\Array\Object\Date\Function\Symbol

// 子组件接收的多种写法
props: { 
    myName: String 
    myAge: [String, Number] //可以接收多个类型 
    mySex: { 
        type: String, 
        required: true, //可以设置必填 
        default: "男", //可以设置默认值 
        }, 
        // 如果type为Object,设置默认值需要设置为一个函数 default(){ return {} } 防止多组件影响同一地址对象内容 
}

父组件传的class,style,id这样的不需要props接收的属性,会自动继承到子组件最外层标签,如果需要关闭继承需要在子组件设置inheritAttrs为false。如果子组件部分标签需要用到上述属性,则使用$attrs获取属性,设置如下:

image.png 如果子组件存在多个根节点,实现继承就会报警告,需要使用$attrs强制指定继承到哪个根节点

image.png

子传父:$emit

子组件:声明事件,调用事件

image.png

父组件:接收事件,调用事件

image.png

非父子组件通信

Eventbus事件总线,vue3已经取消了这个api