vue.js中子组件触发父组件的方法

Posted 2021-05-01 王木木的前端之路

       刚开始接触到vue时，需要将每个页面都有的公共模块抽离出来，封装成一个组件，在需要的页面import进来，但是每个页面的交互可能都不相同。例如，样式一样的按钮，在A页面的功能时删除，在B页面的功能时提交，但是，我引入的都是同一个组件，可能在其他页面还有更多不同的操作功能，为了这个组件有更好的扩展性，能支持更多可能的操作，如果在组件内进行判断是哪种操作，将会耗费很多的时间，有没有更好的解决办法呢？有，那就是使用$emit，一起来看看怎么做吧。

        首先封装好组件，话不多说直接上代码，如图：

         接着，就可以在父组件中进行调用啦，接着看图：

      在页面点击按钮，就能在控制台看到输出内容咯。依此类推，在不同的地方引入这个组件，将要处理的业务逻辑放到父页面的方法中，就能实现同一个组件进行不同的操作了。

       为什么要进行组件封装呢？封装组件可以减少代码的冗余，相同的部分只需要写一次，减少工作量，有人会问，相同的我复制粘贴不就可以了吗？复制粘贴也是可以实现功能的，只是代码两会多很多，也体现不出自己的高逼格，毕竟程序是为了让自己和他人得到更多的方便，而不是做一些没有技术含量的复制粘贴，很晚了，早点睡吧，晚安！