Vue的组件化开发（一）

最新推荐文章于 2024-05-16 17:54:12 发布

Seven_小七

最新推荐文章于 2024-05-16 17:54:12 发布

阅读量65

点赞数

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

本文链接：https://blog.csdn.net/weixin_41606672/article/details/109614786

版权

Vue.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue的组件化开发（一）

一、组件的使用步骤
二、全局组件和局部组件
三、父组件和子组件
四、注册组件的语法糖
五、组件模板的抽离写法
六、为什么组件中的data必须是函数？

一、组件的使用步骤

创建组件构造器：调用 vue.extend()方法
注册组件：调用vue.component（组件标签名，构造器）方法（全局）
使用组件：在vue实例的作用范围内使用


<body>
	<div id="app">
		<my-cpn></my-cpn>  <!--3.使用组件-->
		<my-cpn></my-cpn>
	</div>
	<script>
		//1.创建组件构造器
		const cpnC = Vue.extend({
			template: `
				<div>
					<h2>我是标题</h2>
					<p>我是内容1</p>
					<p>我是内容2</p>
				</div>`
		})
		//2.注册组件
		Vue.component('my-cpn',cpnC)  //组件标签名，构造器
		const app = new Vue({
			el: '#app',
			data:{
				message:'你好'
			}
		})
	</script>
</body>

二、全局组件和局部组件

全局：Vue.component(‘my-cpn’,cpnC) =》可以在多个Vue实例下面使用，但不建议！
局部：在Vue实例下注册 =》开发用的比较多！因为一般就一个vue实例！

<script>
	const app = new Vue({
		el:"#app",
		data:{
			message: 'hello'
		},
		components:{
			cpn: cpnC    //标签名：构造器
		}
	})
</script>

三、父组件和子组件

创建2个构造器
在第1个构造器（父组件）里注册第2个构造器（子组件）
在Vue实例里注册第1个构造器（父组件）
第2个构造器（子组件）只能在父组件的template中使用

<body>
	<div id="app">
		<cpn/>
	</div>
	<script>
		const cpnC = Vue.extend({  //父组件
			template: `
				<div>
					<h2>我是父组件</h2>
					<child-cpn/>   <!--使用子组件-->
				</div>`,
			components:{
				childCpn  //在父组件中注册子组件
			}
		})
		
		const childCpn = Vue.extend({ //子组件
			template: `
				<div>
					<h2>我是子组件</h2>
				</div>`
		})
		
		const app = new Vue({
			el: '#app',
			data:{
				message:'你好'
			},
			components:{
				cpn: cpnC
			}
		})
	</script>
</body>

四、注册组件的语法糖

注册全局组件

Vue.component('cpn1',{
	template: `
		<div>
			<h2>我是标题</h2>
			<p>我是内容1</p>
			<p>我是内容2</p>
		</div>`
})

注册局部组件

const app = new Vue({
	el:"#app",
	components:{
		cpn2:{
			template:`...`	
		}
	}
})

五、组件模板的抽离写法

script标签，类型必须是text/x-template，且需放在所有script标签的最前，既为第一个。

<div id="app">
	<cpn/>
	<cpn/>
	<cpn/>
</div>

<script type="text/x-template" id="abc">
	<div>
		<h2>...</h2>
		<p>...</p>
	</div>
</script>

<script>
	Vue.component('cpn',{
		template: "#abc"   //把模板抽离到script中。
	})
</script>

template标签。

<div id="app">
	<cpn/>
	<cpn/>
	<cpn/>
</div>

<template id="abc">
	<div>
		<h2>...</h2>
		<p>...</p>
	</div>
</template>

<script>
	Vue.component('cpn',{
		template: "#abc"   //把模板抽离到script中。
	})
</script>

六、为什么组件中的data必须是函数？

组件不可以访问Vue实例数据！
要有一个属于自己存放data的地方！

<!--
	1.组件对象也有一个data属性；
	2.data属性必须是一个函数；
	3.该函数返回一个对象，对象内部保存着数据。
-->
{
	template: '#cpn',
	data(){
		return{
			title: 'abc'
		}
	}
}

为什么一定是函数？
1.如果是对象，每个组件会共用data，一个组件的数据变，其他组件数据也会变；
2.如果是函数，每个组件都会返回一个新对象，不会相互影响！

Seven_小七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的组件化开发（一）

Vue的组件化开发一、组件的使用步骤一、组件的使用步骤
复制链接

扫一扫

专栏目录