2-7.Vue全局API之component组件

最新推荐文章于 2023-07-04 16:21:25 发布

落叶~

最新推荐文章于 2023-07-04 16:21:25 发布

阅读量594

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/weixin_43913219/article/details/104052814

版权

本文探讨了Vue全局API中的component组件，重点介绍了如何设置和使用props属性。内容包括：1) 如何在组件中通过props选项挂载并获取属性值；2) 当属性名包含'-'时，如何采用小驼峰命名法进行挂载；3) 如何在构造器内通过v-bind向组件传值引用data中的数据。

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

Vue全局API

1.Vue中component组件props属性设置

在Vue中利用component自定义组件时，利用props选项进行设置和获取标签上的属性值。
这时我们自定义一个component组件，其名为 ‘liu’ ，设置一个属性值：demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>component02中props属性</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<h1>这是component组件的props属性</h1>
		<div class="app">
			<liu demo="落霞与孤鹜齐飞"></liu>
		</div>
		<script type="text/javascript">
			var test=new Vue({
   
				el:'.app',
				data:{
   
					messages:'这是数据测试'