vue组件封装注意项

好久没用vue,复习一下,有误请指出

一 组件交互

就写写我常用的,我觉得是这三种是够用的,其他的看得少没用过,有空看看用用再写

1.props/$emit 父子传值

props的值不可直接修改

props可以是数组可以是对象。

 props: {
   
        modal: {
   
            default: '',
        },
        obj: {
   
        	type: Object,
        	default: () => ({
   
        		a:1
        	})
        },
        arr: {
   
 2 			type: Array,
 3 			default: () => ([])
    	},
    	fun: {
   
 8 			type: Function,
 9 			default: () => () => {
   }
10 		}
   }

default为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
props里面的属性都不能被赋值修改，如果修改会报错。如果需要对props里面的属性进行修改，可以在computed使用其他的值

$emit

向父级传递事件,以及数据,数据将作为事件的参数传递

2. $attrs/$listeners 祖孙

有多层嵌套的组件封装时传递数据和事件
$attrs用v-bind绑定在父级组件上即可使用,用来传递隔代的数据
$listeners用v-on绑定在父级上使用,用来绑定隔代的事件
<parent v-bind="$attrs