Vue基础总结系列文章第一篇---组件

一.组件是vue的核心概念之一

 

一个Vue组件就是一个vue实例，通过传入不同的options来实现组件的自义定化。组件是vue运行的最小单位。

二。组件的三大核心概念之一--属性（props）

pros写法注意点：

要这样写才规范：

有趣的是：props可以传入一个函数

子组件不能直接修改父组件传递的props,那么要修改可以通过父组件传递的函数，来间接修改

组件的props可以自定义，但是如果未定义，我们任然可以给子组件传递任何属性，这些属性默认挂载在子组件的根元素上。

如果不想让未定义属性加载在根元素上，inheritAttrs设置为false即可

结果：

代码参考：

https://github.com/ssxsite/geektime-vue-1/tree/master/%E6%BC%94%E7%A4%BADEMO%E6%BA%90%E7%A0%81/src/views/1.1

问题：

答：

 

三.组件的三大核心概念之二--事件（event）

代码参考：

https://github.com/ssxsite/geektime-vue-1/tree/master/%E6%BC%94%E7%A4%BADEMO%E6%BA%90%E7%A0%81/src/views/1.1

 

问题：

答：

四.组件的三大核心概念之三--插槽（slot）

 

注意：Vue2.6以后推荐使用v-slot语法。废弃之前的slot写法。升级Vue后发现是向下兼容的，原理的slot写法并不用修改。

参考代码：

https://github.com/ssxsite/vue2-webpack_update/tree/master/practice/component

 

五.大属性。

事实上，父组件传递给子组件组件的任何属性、事件和插槽最终都可以使用传递属性这一方法来解决，所以实质上可以理解为，大属性，方便理解和使用。

比如事件：

方法一

方法二：

方法二就是把方法用属性的方式传递给子组件，子组件执行即可。跟第一种方法达到一样的效果。

 

而父组件传递给子组件slot，实际上传递给子组件的的一个虚拟dom数组。子组件把这段数组以虚拟dom的渲染规则去渲染，而不是{{}}的形式渲染，即可达到一样的效果。

参考代码：

https://github.com/ssxsite/geektime-vue-1/tree/master/%E6%BC%94%E7%A4%BADEMO%E6%BA%90%E7%A0%81/src/views/1.1

 

总结：

组件是vue的核心概念，它实现的是一个抽象封装，以达到复用的效果。我们传递给子组件属性，事件，方法，插槽等，以达到组件的定制化效果。事实上，属性，事件，插槽都可以用传递属性的方式来实现。从而让概念简单化，就是传递给子组件一个属性就可以达到各种定制化效果。