Vue全局组件

Vue全局组件教程

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

Vue 全局组件还通过对象字面量的形式，定义了一个组件模板对象。

Vue全局组件详解

语法

<script type="text/javascript">	
	// 通过对象字面量的形式，定义了一个组件模板对象
	var comtempname = {
		template: ''
	}
	// 通过 Vue.component 把组件模板对象，注册为一个全局的Vue组件，同时，为这个组件起了一个名称，可以让我们通过标签形式在页面直接引入这个组件
	Vue.component('comname', comtempname);
	var vm = new Vue({
        el : '#app'
    });
</script>

说明

我们首先通过使用对象字面量的形式，定义了一个组件模板对象，通过 template 关键字来定义模板的内容。

接下来，我们将字面量形式的模板对象注册为一个全局的 Vue 组件。

案例

Vue全局组件案例

<!DOCTYPE html>
<html>
<head>
	<title>Vue全局组件</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<mylogin></mylogin>
        <p>嗨客网（www.haicoder.net）</p>
    </div>
</body>
<script type="text/javascript">	
	// 通过对象字面量的形式，定义了一个组件模板对象
	var login = {
		template: '<h1>全局Login组件---嗨客网</h1>'
	}
	// 通过 Vue.component 把组件模板对象，注册为一个全局的Vue组件，同时，为这个组件起了一个名称，可以让我们通过标签形式在页面直接引入这个组件
	Vue.component('mylogin', login);
	var vm = new Vue({
        el : '#app'
    });
</script>
</html>

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

06 vue component.png

我们首先通过对象字面量的形式，定义了一个组件模板对象，名字叫 login。接下来使用 Vue.component() 方法注册一个全局的 Vue 组件，同时，为这个组件起了一个名称叫 mylogin。

接下来，我们在 HTML 元素中直接引入我们定义的组件。

Vue全局组件总结

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

Vue 全局组件还通过对象字面量的形式，定义了一个组件模板对象。