vue组件的全局注册和局部注册

说明

vue中的组件是vue.js最强大的功能之一,它可以扩展 HTML 元素,封装可重用的代码,实现代码的复用。今天将介绍一下组件的全局注册和局部注册。

全局注册

全局注册的组件,每一个HTML区域都可以引用。我们使用Vue.extend()来定义组件,使用Vue.component()来注册组件。


<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Documenttitle>
	head>
	<body>
		<div id="app">
			<Hello>Hello>
        div>
        <div id="root">
            <Hello>Hello>
        div>
        
		<template id="hello">
			<div>
				<p>{{msg}}p>
			div>
		template>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
            //创建组件
			const Hello = Vue.extend({
				template: "#hello",
				data() {
					return {
						msg: "我是一个全局组件",
					};
				},
			});
			//注册组件
			Vue.component("Hello", Hello);
			new Vue({
				el: "#app",
			});
            new Vue({
				el: "#root",
			});
		script>
	body>
html>

因为Hello是全局注册的组件,所以id为app的元素和root的元素中都可以引用它。

局部注册

局部注册的组件只能在注册过的实例中引用。


<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Documenttitle>
	head>
	<body>
		<div id="app">
			<Hello>Hello>
        div>
        <div id="root">
            <Hello>Hello>
        div>
		<template id="hello">
			<p>{{msg}}p>
		template>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			//组件定义
			const Hello = Vue.extend({
				template: "#hello",
				data() {
					return {
						msg: "我是局部组件",
					};
				},
			});
			new Vue({
				el: "#app",
                //注册组件
				components: {
					Hello: Hello,
				},
			});
            new Vue({
                el:'#root'
            });
		script>
	body>
html>

我们在id为app的实例中注册了组件Hello,所以我们在当前元素中可以引用Hello组件。但是在id为root的元素中不能引用,系统会给出警告,如下图所示。在这里插入图片描述

结语

上面就是vue组件中的全局注册和局部注册。当然,我介绍的比较简单,如果您还想更深入的了解vue的组件,请到vue的官网去查看。如果这篇文章对您有帮助的话,希望能帮我点个赞。
vue组件的全局注册和局部注册_第1张图片

你可能感兴趣的:(前端基础-Vue,vue.js)