想要封装好一个自己的vue组件,一定要熟练掌握这三个技能
父组件 —> 子组件传值(props)
子组件 —> 父组件传值($emit)
以及插槽(slot)
对于一个独立的组件来说
props是用来为组件内部注入核心的内容;
$emit用来使这个独立的组件通过一些逻辑来融入其他组件中。
举个具体点的例子,假如你要做一辆车,车轮是要封装的一个独立组件,props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹,图案等;
而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来。差不多就是这个意思
下面来看代码。
首先,我们先完成div的模拟代码
<template