Vue全局组件

Vue全局组件教程

Vue 组件的出现，就是为了拆分 Vue 实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

Vue 组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。通常一个应用会以一棵嵌套的组件树的形式来组织。

Vue 组件是可复用的 Vue 实例，且带有一个名字。把这个组件作为自定义元素来使用。组件的好处是写一次可以进行任意次数的复用。

组件化和模块化的区别

组件化

是从 UI 界面的角度进行划分的。
前端的组件化，方便 UI 组件的重用。

模块化

是从代码逻辑的角度进行划分的。
方便代码分层开发，保证每个功能模块的职能单一。

Vue全局组件详解

语法

<body>
	<div id="app">
		<!-- 如果要使用组件，直接把组件的名称，以 HTML 标签的形式，引入到页面中即可 -->
		<componentname></componentname>
    </div>
</body>
<script type="text/javascript">	
	// 使用 Vue.extend 来创建全局的 Vue 组件
	var com = Vue.extend({
		template:'<h3>使用 Vue.extend 来创建 Vue 全局组件</h3>'//通过template属性，指定了组件要展示的HTML结构
	})
	//使用 Vue.component('组件名称', 创建出来的组件模板对象)
	Vue.component('componentname', com)
	var vm = new Vue({
        el : '#app'
    });
</script>

说明

我们首先使用 Vue.extend() 方法来创建一个全局的 Vue 组件，然后通过 template 属性，指定了组件要展示的 HTML 结构。接着使用 Vue.component() 将组件名称和组件的模板对象进行绑定。

如果要使用组件，直接把组件的名称，以 HTML 标签的形式，引入到页面中即可，这种创建的组件是 Vue 全局组件。

如果定义的组件名是驼峰命名的形式，那么我们在页面调用的时候，需要将驼峰命名法的形式改成 - 不然引用不成功

案例

Vue全局组件使用

<!DOCTYPE html>
<html>
<head> 
	<title>使用 Vue.extend 来创建 Vue 全局组件</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<!-- 如果要使用组件，直接把组件的名称，以 HTML 标签的形式，引入到页面中即可 -->
		<mycom1></mycom1>
        <!-- 如果定义的组件名是驼峰命名的形式，那么我们在页面调用的时候，需要将驼峰命名法的形式改成 - 不然引用不成功 -->
		<my-com1></my-com1>
        <p>嗨客网（www.haicoder.net）</p>
    </div>
</body>
<script type="text/javascript">	
	// 使用 Vue.extend 来创建全局的 Vue 组件
	var com1 = Vue.extend({
		template:'<h3>使用 Vue.extend 来创建 Vue 全局组件</h3>'//通过template属性，指定了组件要展示的HTML结构
	})
	//使用 Vue.component('组件名称', 创建出来的组件模板对象)
	Vue.component('mycom1', com1)
	Vue.component('myCom1', com1)
	var vm = new Vue({
        el : '#app'
    });
</script>
</html>

浏览器运行效果，如下图所示：

01 vue component.png

我们首先使用 Vue.extend() 方法来创建一个全局的 Vue 组件，该全局组件要展示的 HTML 结构就是一个 h3 标签。

接着使用 Vue.component() 将组件名称 mycom1 和组件的模板对象 com1 进行绑定。接着我们再次使用 Vue.component() 将组件名称 myCom1 和组件的模板对象 com1 进行绑定。

最后，我们以 HTML 标签的形式，将组件引入到了页面中。

Vue全局组件使用

<!DOCTYPE html>
<html>
<head> 
	<title>使用 Vue.extend 来创建 Vue 全局组件</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<!-- 如果要使用组件，直接把组件的名称，以 HTML 标签的形式，引入到页面中即可 -->
		<mycom1></mycom1>
        <p>嗨客网（www.haicoder.net）</p>
    </div>
</body>
<script type="text/javascript">
	// Vue.component第一个参数：组件的名称，将来在引用组件的时候，就是一个 标签的形式
	// 第二个参数：Vue.extend 创建的组件，其中 template 就是组件将来要展示的内容
	Vue.component('mycom1', Vue.extend({
		template:'<h3>使用 Vue.extend 来创建 Vue 全局组件</h3>'
	}))
	var vm = new Vue({
        el : '#app'
    });
</script>
</html>

浏览器运行效果，如下图所示：

02 vue component.png

Vue.component 的第二个参数可以直接使用 Vue.extend 来写。

Vue全局组件总结

Vue 组件的出现，就是为了拆分 Vue 实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

如果定义的组件名是驼峰命名的形式，那么我们在页面调用的时候，需要将驼峰命名法的形式改成 - 不然引用不成功。