vue父组件向子组件传递数据_vue3父传子布尔值子组件接收后变成字符串-优快云博客

本文链接：https://blog.youkuaiyun.com/Mrzhouzh/article/details/115281311

本文详细探讨了Vue框架中父组件如何向子组件传递数据，包括使用props特性，动态绑定属性，以及监听子组件的自定义事件进行数据交互。通过实例解析，帮助开发者深入理解Vue的数据传递机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
</head>

<body>
	<div id="app">
<!-- 如果不用:就会当成字符串传过来  用:就会当为变量 -->
<!-- <cpn :cmovies='movies'></cpn> -->
<!-- 必传值 :cmessage='message' -->
<cpn  :cmessage='message' :cmovies='movies'></cpn>
	</div>

<template id="cpn">
<div>
<ul>
	<li v-for='item in cmovies'>
{{item}}
	</li>
</ul>
	<H2>{{cmessage}}</H2>
</div>

</template>

	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
// 父传子：props
	const cpn = {
			template:'#cpn',
			// 数组格式
			// props:['cmovies','cmessage'],
		props:{
			//	1类型的限制
			cmovies:Array,
			cmessage:String,
			//	2可以提供一些默认值 以及必传值
			cmessage:{
				type:String,
				default:'aaaaa',
				// 必传值
				required:true//布尔值
			},
			// 类型是对象或者数组时，默认值必须是一个函数
			cmovies:{
				type:Array,
				default(){
					return []
				}
			}
		},


			data(){
				return{

				}
			},
			methods:{

			}
	}
		const app = new Vue({
			el: '#app',
			data: {
				message: '你好啊',
				movies:['海贼王','海王','海尔兄弟']
			},
			components:{
				cpn
			}
		})

		const name = 'wht'
		const ino = {
			name
		}
		console.log(ino);
	</script>
</body>

</html>