vue中的组件化开发（全局组件，局部组件，插槽）

最新推荐文章于 2024-05-25 08:59:01 发布

艺术就是派大星220

最新推荐文章于 2024-05-25 08:59:01 发布

阅读量373

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Rossbort/article/details/120318210

版权

本文介绍了Vue.js中的组件化开发，包括全局组件和局部组件的创建与使用，详细讲解了组件命名规范，并探讨了默认插槽、具名插槽及插槽作用域。此外，还简要提到了使用jsx实现组件的方法。

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

组件是可复用的 Vue 实例，且带有一个名字。组件提高开发效率，实现敏捷性开发

VUE中的组件分为两种：全局组件/私有组件
全局组件：创建组件后直接在页面中调取使用即可
私有组件：需要在页面渲染的时候(new Vue)基于components注册一下才能使用

组件名最安全的写法就是烤串(el-button)命名

全局组件

全局组件使用模板
Vue.component([name],[options])：
        [name]是组件的名字：
                   命名规范遵循两种模式
                        kebab-case：base-info 调用 <base-info></base-info>
                          PasalCase：BaseInfo 调用 <baseinfo></baseinfo> 【页面在VUE中渲染的时候，所有组件大写的名字都会变为小写】 <base-info></base-info>
        [options]是组件的配置项：每一个组件都是一个单独vm实例，所以配置项中可以设置的就是vm实例中配置的data/methods/computed...信息

代码如下：

<body>
    <div id="app">
			//在VUE视图中调用组件需要采用双闭合的方式，
             因为单闭合的方式调用，会导致下面的代码不    
              再进行渲染  
            <base-info/>

			//我们可以在双闭合标签内在编写一些其它的内容，
              把这些内容作为组件的扩充内容（SLOT插槽 
              的概念）
			<base-info>
				<p>价格：￥198</p>
                <button>立即购买</button>
			</base-info>

		 //组件可以进行复用
		<base-info></base-info>
		<base-info></base-info>
		<base-info></base-info>
		<base-info></base-info>
	</div>
	
	<!-- 创建TEMPLATE模板 -->
	<template id="baseInfoTemplate">
		<div class="box">
			<img :src="img" alt="">
			<p v-html="content"></p>
		</div>
	</template>

	<!-- IMPORT JS -->
	<script src="node_modules/vue/dist/vue.min.js"></script>
	<script>
		Vue.component('base-info', {
			template: '#baseInfoTemplate',
            组件中的data为什么要写成函数形式？
			    data指定响应的数据（
                1.为了保证每个组件中的DATA是独立的，我们需要让每个组件的DATA是一个闭包函数，
                    只有这样最后把N多组件放在一起渲染，相互之间的DATA才不会冲突的）
                2.为了保证每个组件的数据的独立性：每一次使用组件时

最低0.47元/天解锁文章

艺术就是派大星220

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue中的组件化开发（全局组件，局部组件，插槽）

组件是可复用的 Vue 实例，且带有一个名字。组件提高开发效率，实现敏捷性开发VUE中的组件分为两种：全局组件/私有组件全局组件：创建组件后直接在页面中调取使用即可私有组件：需要在页面渲染的时候(new Vue)基于components注册一下才能使用全局组件全局组件使用模板Vue.component([name],[options])：[name]是组件的名字：命名规范遵循两种模式 ...
复制链接

扫一扫