Vue入门（三）—— 组件化开发

最新推荐文章于 2022-01-12 00:57:35 发布

冰之沁泠

最新推荐文章于 2022-01-12 00:57:35 发布

阅读量370

点赞数

分类专栏： Vue 文章标签： vue vue基础 vue入门 vue组件化开发

本文链接：https://blog.csdn.net/weixin_43344890/article/details/113806241

版权

本文介绍了Vue组件化的概念和重要性，详细讲解了组件的全局注册与局部注册，强调了组件数据必须以函数形式返回对象。此外，还探讨了Vue组件间通信的方式，包括父向子、子向父及兄弟组件间的数据传递，并提到了事件中心的角色。最后，文章重点讨论了插槽的使用，包括匿名插槽、具名插槽和作用域插槽，阐述了插槽如何提高组件的可复用性。

摘要由CSDN通过智能技术生成

组件

组件 (Component) 是 Vue.js 最强大的功能之一
组件可以扩展 HTML 元素，封装可重用的代码

组件注册

全局注册

Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象
全局组件注册后，任何vue实例都可以用

组件基础用法

<body>
		<div id="example">
			<!-- 2、 组件使用 组件名称 是以HTML标签的形式使用  -->
			<my-component></my-component>
			<script src="js/vue.js"></script>
		</div>
		<script>
			//   注册组件 
			// 1、 my-component 就是组件中自定义的标签名
			Vue.component('my-component', {
    
				template: '<div>A custom component!</div>'
			});

			// 创建根实例
			new Vue({
    
				el: '#example'
			});
		</script>
	</body>

组件注意事项

组件参数的 data 值必须是函数，同时这个函数要求返回一个对象
组件模板必须是单个根元素
组件模板的内容可以是模板字符串

	<body>
		<div id="app">
			<!-- 
				4、  组件可以重复使用多次 
			      因为data中返回的是一个对象所以每个组件中的数据是私有的
				  即每个实例可以维护一份被返回对象的独立的拷贝   
			-->
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
			<!-- 8、必须使用短横线的方式使用组件 -->
			<hello-world></hello-world>
		</div>
		<script src="js/vue.js"></script>
		<script>
			//5  如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
			// 7、但是在普通的标签模板中，必须使用短横线的方式使用组件
			Vue.component('HelloWorld', {
    
				data: function() {
    
					return {
    
						msg: 'HelloWorld'
					}
				},
				template: '<div>{
    {msg}}</div>'
			});

			Vue.component('button-counter', {
    
				// 1、组件参数的data值必须是函数 
				// 同时这个函数要求返回一个对象  
				data: function() {
    
					return {
    
						count: 0
					}
				},
				//  2、组件模板必须是单个根元素
				//  3、组件模板的内容可以是模板字符串  
				template: `
			        <div>
			          <button @click="handle">点击了{
     {count}}次</button>
			          <button>测试123</button>
						#  6 在字符串模板中可以使用驼峰的方式使用组件	
					   <HelloWorld></HelloWorld>
			        </div>
			      `,
				methods: {
    
					handle: function() {
    
						this.count += 2;
					}
				}
			})
			var vm = new Vue({
    
				el: '#app',
				data: {
    

				}
			});
		</script>
	</body>

局部注册

只能在当前注册它的 vue 实例中使用

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

最低0.47元/天解锁文章