Vue组件

mzf19980423

于 2021-04-10 17:52:40 发布

阅读量63

点赞数

分类专栏：前端 vue JavaScript 文章标签： vue web 小程序 java

本文链接：https://blog.csdn.net/weixin_45153932/article/details/115558955

版权

前端同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

1、Vue组件

作用：用来建设Vue实例对象中代码量，日后在使用Vue开发过程中，可以根据不同业务功能将页面中划分成不同的多个组件，然后由多个组件去完成整个页面的布局，便于日后使用Vue进行开发时页面管理，方便开发人员维护。

在这里插入图片描述

2、组件使用

2.1、全局组件

注册到Vue中根实例上的组件成为全局组件，全局组件一旦定义可以在任意组件中进行使用。

Vue.component('user',{
	template:"<div>用户登录局部组件</div>",
});

2.2、局部组件

第一种写法：

<script src="js/vue.js"></script>
<script>
	new Vue({
		el:"",
		data:{},
		...
		...
		component{
			login:{
				template:"<div>用户登录局部组件</div>"
			}
		}
	})
</script>

第二种写法：

<script src="js/vue.js"></script>
<script>
	const  login = {
		template:"<div>用户登录局部组件</div>"
	};
	new Vue({
		el:"",
		data:{},
		...
		...
		component{
			login,
		}
	})
</script>

第三种写法

<template id="loginTemplate">
	<div>用户登录局部组件</div>
</template>
<script src="js/vue.js"></script>
<script>
	const  login = {
		template:"#loginTemplate"
	};
	new Vue({
		el:"",
		data:{},
		...
		...
		component{
			login,
		}
	})
</script>

3、组件中定义数据与事件

组件中的数据是放在函数里面的，事件不变

<script>
	const user = {
		template:"<div><h3>用户列表</h3><h3>{{count}}</h3></div>",
		data function(){  //可以简写为data()
			//直接写data{},会报错
			return{
				count:100,
			}
		}
		methods:{
			//事件和数据是不相同的，数据放在函数，事件不变。
		}
		computed:{
			//组件中的计算属性
		}
	}
</script>

4、注意事项

在定义组件名称是如果组件名称使用驼峰命名法，在使用组件时单词必须全部小写，同时使用-作为分隔使用

<html>
<head>...</head>
<body>
	<div id="app">
		<user-list></user-list>
	</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
	Vue.component('userList',{
		template:"<div>这是user组件<div>"
	});
</script>

5、父组件向子组件进行数据传递 Prop

静态传递数据

<body>
	<login aa="欢迎使用"></login>
</body>
<script>
	const login = {
		template:"<div><h3>用户登录</h3></div>",
		data function(){  //可以简写为data()
			//直接写data{},会报错
			return{
				count:100,
			}
		}
		props:['aa']
	}
</script>

动态传递数据

<body>
	<login v-bind:name="name"></login>
</body>
<script>
	const login = {
		template:"<div><h3>用户登录</h3></div>",
		data function(){  //可以简写为data()
			//直接写data{},会报错
			return{
				count:100,
			}
		}
		props:['name']
	}

const app = new Vue({
	el:"#app",
	data:{
		msg:"Vue中组件开发",
		name:"小陈",
	},
})
</script>

mzf19980423

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件

1、Vue组件作用：用来建设Vue实例对象中代码量，日后在使用Vue开发过程中，可以根据不同业务功能将页面中划分成不同的多个组件，然后由多个组件去完成整个页面的布局，便于日后使用Vue进行开发时页面管理，方便开发人员维护。2、组件使用2.1、全局组件注册到Vue中根实例上的组件成为全局组件，全局组件一旦定义可以在任意组件中进行使用。Vue.component('user',{ template:"<div>用户登录局部组件</div>",});2.2、局部组件第
复制链接

扫一扫

专栏目录