Vue 组件(全局+局部)_组件全局依赖-CSDN博客

本文链接：https://blog.csdn.net/LV_MING_zg/article/details/107823489

原来 Vue 这么简单！！！ - - - vue组件

Vue_组件

1.思维导图：
在这里插入图片描述
Vue中的组件
1.组件（Component）是 Vue.js 最强大的功能之一；
2.组件可以扩展 HTML 元素，封装可重用的代码；

Vue视图层的灵魂 — 组件化
所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。

代码：
第一部分：引入vue.js(不可或缺！！！)

<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue.min.js" ></script>

第二部分：HTML部分

<body>
		<div id="app">
			<my-cpn></my-cpn>
		</div>
	</body>

第三部分：js部分（1、创建组件构造器对象）

const cnp = Vue.extend({
			template:`
			     <ul>
			        <li>XXXXX</li>
			        <li>XXXXXXX</li>
			        <li>XXXX</li>
			        <li>XXXX</li>
			        <li>XXXX</li>
			     </ul>
		});

第四部分：js部分（2、全局组件）

      //组件的注册
       Vue.component('my-cpn',cnp);
	  //组件的使用	
		const app = new Vue({
			el:'#app'
		})

第四部分：js部分（3、局部组件）

    // 组件注册和使用
		const app = new Vue({
			el:'#app',
			components:{
				'my-cpn':cnp
			}
		})

代码解释：

调用Vue.extend()创建的是一个组件构造器，构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML；

调用Vue.component()注册组件时，需要提供2个参数：组件的标签名和组件构造器；注册的组件要挂载到某个Vue实例下，否则它不会生效；

运行效果：
在这里插入图片描述