了解封装vue组件的过程
首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。
分析需求:确定业务需求,把页面中可以复用的结构,样式以及功能,单独抽离成一个组件,实现复用
具体步骤:Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值,子组件修改好数据后,想把数据传递给父组件。可以采用$emit方法。
问题1:vue组件是如何进行传值的?
父向子 -> props定义变量 -> 父在使用组件用属性给props变量传值
子向父 -> $emit触发父的事件 -> 父在使用组件用@自定义事件名=父的方法 (子把值带出来)
问题2:vue组件data为什么必须时函数
每个组件都是 Vue 的实例, 为了独立作用域, 不让变量污染别人的变量
问题3:vue组件命名的规范?
给组件命名有两种方式(Vue.Component/components时),一种是使用链式命名"my-component",一种是使用驼峰命名"MyComponent"。
因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符),避免和当前以及未来的 HTML 元素相冲突