#|【vue 组件化开发一】组件基本使用、全局和局部组件、父组件和子组件的区别的基础学习|vue.js|javascript|前端

目录
前言：
完整内容请关注：
一、组件的基本使用
二、全局组件和局部组件
全局注册，通过 Vue.component
局部注册，通过 components:{}
全局组件
局部组件
三、父组件和子组件的区别

前言：完整内容请关注： (1条消息) Vue 的基础学习_小余努力搬砖的博客-CSDN博客
文章图片
https://blog.csdn.net/yzq0820/category_11934130.html?spm=1001.2014.3001.5482
一、组件的基本使用简单的组件化使用例子
组件是可复用的 Vue 实例，且带有一个名字：
在这个例子中是button-counter 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
template中是组件的DOM元素内容。
使用组件

二、全局组件和局部组件全局注册，通过 Vue.component 局部注册，通过 components:{} 全局组件 ?全局组件，可以在多个vue实例中使用，类似于全局变量。
?使用Vue.component('HelloWorld', {data(){}})方式注册，直接使用调用。HelloWorld是全局组件的名字，{data(){}}是定义的组件对象。

第二个全局组件通过
实现了在渲染

局部组件 ? 局部组件，只能在当前vue实例挂载的对象中使用，类似于局部变量，有块级作用域。
? 使用方式与全局变量一样，直接使用调用

三、父组件和子组件的区别 ? 上述代码中定义了两个组件对象cpn1和cpn2，在组件cpn2中使用局部组件注册了cpn1，并在template中使用了注册的cpn1，然后在vue实例中使用注册了局部组件cpn2，在vue实例挂载的div中调用了cpn2，cpn2与cpn1形成父子组件关系。
注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。

【#|【vue 组件化开发一】组件基本使用、全局和局部组件、父组件和子组件的区别】