VUE中的组件

81 阅读1分钟

## 组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用,那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率

## 组件命名

短横线:<my-component >
驼峰式:<MyComponent> 注:如果是驼峰式,在引用时必须将其展开:my-component

基本用法:

全局注册 [父、根组件]

image.png

驼峰式

image.png

局部组件

image.png

父子组件传值

在 Vue 中,父子组件的关系可以总结为 props 向下传递,事件向上传递。父组件通过 props 给子组件下
发数据,子组件通过事件给父组件发送消息

子组件通过v-bind绑定来接收父组件的值

image.png

子组件监听父组件

通过$emit将实际事件click转换为虚拟事件

image.png