VUE之组件（基础、分类、命名）

最新推荐文章于 2024-04-04 15:48:38 发布

Yixuan.

最新推荐文章于 2024-04-04 15:48:38 发布

阅读量226

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45729307/article/details/102678085

版权

本文深入探讨Vue.js的组件系统，包括组件的注册（全局与局部）、命名规范、组件嵌套以及在实际场景中的应用。通过学习，你可以理解组件的注册过程，如全局组件和局部组件的使用，并了解组件数据选项`data`的基本用法。

摘要由CSDN通过智能技术生成

组件（ Component ）是 Vue.js 最核心的功能，也是整个框架设计最精彩的地方，当然也是最难掌握的

在这里插入图片描述
上侧图中是个很常见的聊天界面，有些标准的控件，比如右上角的关闭按钮、输入框、发送按钮等。

场景举例

上面的需求虽然有点变态，但却是业务中很常见的，那就是一些控件、 JavaScript 功能的复用。
没错， Vue.js的组件就是提高重用性的，让代码可复用，当学习完组件后，上面的问题就可以轻松搞定了，再也不用害怕产品经理的奇随需求

组件注册

回顾下创建 Vue 实例的方法：
在这里插入图片描述
组件Component与之类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。
①全局组件：任何Vue 实例都可以使用
②局部组件：只有在该实例作用域下有效（对比全局与局部变量记忆）

组件注册-全局

全局注册组件语法：
my-component 就是注册的组件自定义标签名称，推荐使用小写加减号分割的形式命名（即kebab-case短横线分隔命名法，此外还有PascalCase首字母大写命名即大驼峰法）
在这里插入图片描述
案例↓

要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用<组件名></组件名>形式来使用组件了，示例代码如下

<div id="app">
			<my-component></my-component>
		</div>
        <script type="text/javascript">
			Vue.component('my-component',{
   
				//选项
			})
			var app = new Vue({
   
				el:'#app'
			});
		</script>

此时打开页面还是空白的，因为注册的组件没有任何内容，在组件选项中添加 template（模板）就可以显示组件内容了。
示例代码如下

<div id="app">
			<my-component></my-component>
		</div>
        <script type="text/javascript">
			Vue.component('my-component',{
   
				//选项
				template:"<div>组件内容</div>"   //添加模板内容
			})
			var app = new Vue({
   
				el:'#app'
			});
		</script>

渲染结果为:↓
在这里插入图片描述
全局组件注册步骤小结：
①注册组件component并命名
②添加模板template内容
③通过自定义组件名调用组件

<div id="app">
			<!--3.通过自定义组件名调用组件-->
			<my-component></my-component>
		</div>
        <script type="text/javascript">
			/*1.注册全局组件-组件名my-name*/
			Vue.component('my-component',