主要介绍了Vuejs 单文件组件实例详解,需要的朋友可以参考下

在之前的实例中，我们都是通过 Vue.component 或者 components 属性的方式来定义组件，这种方式在很多中小规模的项目中还好，但在复杂的项目中，下面这些缺点就非常明显了： 字符串模板：缺乏高亮，书写麻烦，特别是 HTML 多行的时候，虽然可以将模板写在 html 文件中，但是侵入性太强，不利于组件解耦分离。 不支持CSS：意味着当 HTML 和 Javascr ipt 组件化时，CSS明显被遗漏了 没有构建步骤：限制只能使用 HTML 和 ES5 Javascr ipt，而不

一、场景描述： 曾经有个电商项目，其中有个“老带新”模块，而且该模块新增的入口很多，但是新增后展示效果还不一样，当时就考虑将新增的组件单独拿出来，其实就是一个子组件向父组同步数据的过程。 当然，背景不重要了，关键是看实现的方式。 二、场景展示效果 （PS：展示效果请忽略美感）   三、如何实现 注意：Vuejs架构通过vue-cli 3.X搭建的项目，版本无所谓。 1、先看下目录体系，下图子组件放在components文件夹内，模拟子组件为itemAdd.vue，父组件视图放在views文件夹内