018_Vue父组件向子组件传值

最新推荐文章于 2022-11-23 18:44:45 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-11-23 18:44:45 发布

阅读量261

点赞数

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

本文链接：https://blog.csdn.net/aihiao/article/details/122880820

版权

vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1. 父组件向子组件传值

1.1. 组件内部通过props接收传递过来的值

Vue.component('menu-item', {
  	props: ['title'],
  	template: '<div>{{title}}</div>'
});

1.2. 父组件通过属性将值传递给子组件

<menu-item title='来自父组件的title'></menu-item>
<menu-item :title='ptitle'></menu-item>

1.3. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>父组件向子组件传值</title>
	</head>
	<body>
		<div id="app">
			<div>{{pmsg}}</div>
			<!-- title直接传递数据 :title使用绑定数据 -->
    		<menu-item title='来自父组件的title'></menu-item>
    		<menu-item :title='ptitle' content='来自父组件的content'></menu-item>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			Vue.component('menu-item', {
		      	props: ['title', 'content'],
		      	data: function() {
		        	return {
		          		msg: '子组件本身的数据'
		        	}
		      	},
		      	template: '<div>{{msg + "--->" + title + "--->" + content}}</div>'
    		});

			var vm = new Vue({
				el: "#app",
				data: {
					pmsg: '父组件中内容',
					ptitle: '来自父组件动态绑定的title'
				}
			});
		</script>
	</body>
</html>

1.4. 效果图

2. props属性命名规则

2.1. 如果使用驼峰式命名props属性, 那么在使用属性的时候, 只能在字符串模板中用驼峰的方式使用属性, 但是在普通的标签模板中, 必须使用短横线的方式使用属性。

Vue.component('inner-com', {
  	props: ['innercomTitle'],
  	template: '<div>{{innercomTitle}}</div>' // 模板中需要使用驼峰式
});

<!-- 在html中是短横线方式 -->
<inner-com :innercom-title="ptitle"></inner-com>

2.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>父组件向子组件传值命名规则</title>
	</head>
	<body>
		<div id="app">
			<div>{{pmsg}}</div>
			<inner-com :innercom-title="ptitle"></inner-com>
			<menu-item :content='pcontent'></menu-item>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			// 如果使用驼峰式命名props属性, 那么在使用属性的时候, 只能在字符串模板中用驼峰的方式使用属性, 但是在普通的标签模板中, 必须使用短横线的方式使用属性。
			Vue.component('inner-com', {
		      	props: ['innercomTitle'],
		      	template: '<div>{{innercomTitle}}</div>'
    		});

    		Vue.component('menu-item', {
		      	props: ['content'],
		      	template: '<div><inner-com innercomTitle="我是title"></inner-com> {{content}}</div>'
    		});

			var vm = new Vue({
				el: "#app",
				data: {
					pmsg: '父组件中内容',
					ptitle: '来自父组件动态绑定的title',
					pcontent: '来自父组件动态绑定的content'
				}
			});
		</script>
	</body>
</html>

2.3. 效果图

3. props属性值类型

3.1. props属性值类型

3.1.1. 字符串String

3.1.2. 数字Number

3.1.3. 布尔值Boolean

3.1.4. 数组Array

3.1.5. 对象Object

3.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>父组件向子组件传值-props属性值类型</title>
	</head>
	<body>
		<div id="app">
			<menu-item :str='pstr' :num='pnum' :boo='pboo' :arr='parr' :obj='pobj'></menu-item><hr />
			<menu-item str='字符串' num='123' boo='true'></menu-item>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			Vue.component('menu-item', {
		      	props: ['str', 'num', 'boo', 'arr', 'obj'],
		      	template: `
					<div>
						<div>{{str}} {{typeof str}}</div>
						<div>{{num}} {{typeof num}}</div>
						<div>{{boo}} {{typeof boo}}</div>
						<div v-if="arr != undefined">
							<div v-if="Array.isArray(arr)">array</div>
							<ul v-for="(item, index) in arr">
								<li>[{{index}}] {{item}}</li>
							</ul>
						</div>
						<div v-if="arr != undefined">
							<div>{{typeof obj}}</div>
							<ul v-for="(v, k, index) in obj">
								<li>[{{index}}] {{k}}: {{v}}</li>
							</ul>
						</div>
					</div>
		      	`
    		});

			var vm = new Vue({
				el: "#app",
				data: {
					pstr: '字符串',
					pnum: 123,
					pboo: true,
					parr: ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计"],
					pobj: {id: 1001, name: "JavaScript权威指南"},
				}
			});
		</script>
	</body>
</html>

3.3. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
018_Vue父组件向子组件传值

1. 父组件向子组件传值1.1. 组件内部通过props接收传递过来的值Vue.component('menu-item', { props: ['title'], template: '<div>{{title}}</div>'});1.2. 父组件通过属性将值传递给子组件<menu-item title='来自父组件的title'></menu-item><menu-item :title='ptitle'>
复制链接

扫一扫