前言组件（ Component ）是 Vue.js 最核心的功能，也是整个框架设计最精彩的地方，当然也是最难掌握的。接下来会由浅入深地学习组件的全部内容，并通过几个案例练习熟练使用 Vue 组件。Vue.js的组件就是提高重用性的，让代码可复用组件注册回顾下创建 Vue 实例的方法：组件Component与之类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。①全...
前言
- 组件（ Component ）是 Vue.js 最核心的功能，也是整个框架设计最精彩的地方，当然也是最难掌握的。
- 接下来会由浅入深地学习组件的全部内容，并通过几个案例练习熟练使用 Vue 组件。
- 正式讲解组件前，先看个场景，了解下为什么学习组件？
场景举例
- 有人会问：为什么学习组件，作用是什么？接下来看个场景
- 产品经理：现在需求升级了，这几个控件还有别的地方要用到。
- 程序员：没问题，复制粘贴呗。
- 产品经理：要求输入框要带数据验证，按钮的图标支持自定义
- 程序员：这样吧，用 JavaScript 封装后一起复制吧。
- … …等到项目快完结，后期项目交接前两天
- 产品经理：所有使用输入框的地方，都要改成支持回车键提交。
- 程序员：好吧，给我一天的时间，加班一个一个加上去。
- 上面的需求虽然有点变态，但却是业务中很常见的，那就是一些控件、 JavaScript 功能的复用。
- 没错， Vue.js的组件就是提高重用性的，让代码可复用，当学习完组件后，上面的问题就可以轻松搞定了，再也不用害怕产品经理的奇随需求。
组件注册
- 回顾下创建 Vue 实例的方法：
- 组件Component与之类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。
- ①全局组件：任何Vue 实例都可以使用
- ②局部组件：只有在该实例作用域下有效（对比全局与局部变量记忆）
组件注册-全局
全局注册组件语法：
- my-component就是注册的组件自定义标签名称，推荐使用小写加减号分割的形式命名（即kebab-case短横线分隔命名法，此外还有PascalCase首字母大写命名即大驼峰法）。
- 要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用<组件名></组件名>形式来使用组件了
- 此时打开页面还是空白的，因为注册的组件没有任何内容，在组件选项中添加 template（模板）就可以显示组件内容了。
- 示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局组件注册</title>
<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--/3、通过自定义组件调用组件名 -->
<my-component></my-component>
<my-component2></my-component2>
<!-- HTML里面获取Vue大驼峰获取不到 会报错 -->
<!-- HTML对大小写不敏感 大写会自动转换为小写 -->
</div>
</body>
<script type="text/javascript">
/*全局注册组件时，需要在实例化之前，否则报错*/
/*组件注册-全局*/
/*全局注册的组件可以用在任何Vue 根实例 (new Vue) 的模板中*/
// 1、注册组件component并命名
Vue.component('my-component',{
/*字符串模板*/
//2、 添加模板tempalte内容
template:`
<div>
我是全局组件
<button>发送</button>
</div>`,
/*必须用div包裹，否则会报错*/
});
Vue
最低0.47元/天 解锁文章
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
