一.组件是vue的核心概念之一
一个Vue组件就是一个vue实例,通过传入不同的options来实现组件的自义定化。组件是vue运行的最小单位。
二。组件的三大核心概念之一--属性(props)
pros写法注意点:
要这样写才规范:
有趣的是:props可以传入一个函数
子组件不能直接修改父组件传递的props,那么要修改可以通过父组件传递的函数,来间接修改
组件的props可以自定义,但是如果未定义,我们任然可以给子组件传递任何属性,这些属性默认挂载在子组件的根元素上。
如果不想让未定义属性加载在根元素上,inheritAttrs设置为false即可
结果:
代码参考:
问题:
答:
三.组件的三大核心概念之二--事件(event)
代码参考:
问题:
答:
四.组件的三大核心概念之三--插槽(slot)
注意:Vue2.6以后推荐使用v-slot语法。废弃之前的slot写法。升级Vue后发现是向下兼容的,原理的slot写法并不用修改。
参考代码:
https://github.com/ssxsite/vue2-webpack_update/tree/master/practice/component
五.大属性。
事实上,父组件传递给子组件组件的任何属性、事件和插槽最终都可以使用传递属性这一方法来解决,所以实质上可以理解为,大属性,方便理解和使用。
比如事件:
方法一
方法二:
方法二就是把方法用属性的方式传递给子组件,子组件执行即可。跟第一种方法达到一样的效果。
而父组件传递给子组件slot,实际上传递给子组件的的一个虚拟dom数组。子组件把这段数组以虚拟dom的渲染规则去渲染,而不是{{}}的形式渲染,即可达到一样的效果。
参考代码:
总结:
组件是vue的核心概念,它实现的是一个抽象封装,以达到复用的效果。我们传递给子组件属性,事件,方法,插槽等,以达到组件的定制化效果。事实上,属性,事件,插槽都可以用传递属性的方式来实现。从而让概念简单化,就是传递给子组件一个属性就可以达到各种定制化效果。