父组件传值props及$emit

最新推荐文章于 2024-08-28 11:31:50 发布

LLL_LH

最新推荐文章于 2024-08-28 11:31:50 发布

阅读量553

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/90052408

版权

Vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

1.props：用来接收父组件传递的数据，可以是数组，也可以是对象
如果是对象,

type可以是String,Number,Boolean,Array,Object,Date,Function,Symbol,自定义构造函数
default: 给父组件传入的数据一个默认值，如果父组件没有数据传入，就用默认值，如果传入，则是父组件传入的值。对象或数组的默认值必须从一个函数返回
required: true/false 这个传入的prop是否必填
validator: 函数，对传入的数据进行校验

props: {
	 propsName: {
		 type: Number,
		 default: defaultValue,
		 validator: function (value) {
			return value >= 0
		  }
	 },
	 data: {
	 		 type: Array,
	 		 default: () => []
	 },
	 data1: {
	 		 type: Array,
	 		 default: () => [1,2,3]
	 },
	 data2: {
	 		 type: Array,
	 		 default: () => [
				 {
					 id: 1,
					 name: 'aaaa'
				 },
				 {
					 id: 2,
					 name: 'bbbb'
				 }
			 ]
	 },
	 obj:{
		 type: Object,
		 default() => {}
	 },
	 obj1: {
		 type: Object,
		 default() {
			 return {
				 name: 'abc',
				 age: 20
			 }
		 }
	 }
}

2.$emit

$emit(eventName,[...args]) :点击子组件向父组件传递事件名称和参数，事件名称String类型，参数可以是多个，
父组件监听子组件触发的事件@eventName="handleEvent"，然后在父组件响应handleEvent事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="input" /><button type="button" @click="handleAdd">提交</button>
			<ul>
				<todo-item v-for="(itm,ind) in list" :key="ind" :content="itm.name" :index="ind" @delete="handleDelete"></todo-item>
			</ul>
		</div>
		<script>
			//创建全局组件,组件名可以使用 kebab-case 字母小写且用-连接,如todo-item,或者PascalCase首字母大写TodoItem
// 			Vue.component('todo-item',{
// 				props: ['content'],
// 				template: '<li>{{content}}</li>'
// 			})
			
			//创建局部组件
			let TodoItem = {
				props: ['content','index'],
				template: '<li>{{content}}<button @click="handleClick">删除</button></li>',
				methods: {
					handleClick(){
						//子组件向父组件传值,使用$emit向外触发事件,这里触发delete事件,然后在父组件里监听delete事件
						this.$emit('delete',this.index,20)
					}
				}
			}
			
			let app = new Vue({
				el: '#app',
				components:{
					TodoItem
				},
				data: {
					input: '',
					list: [
						{
							id: 1,
							name: 'html'
						},
						{
							id: 2,
							name: 'css'
						},
						{
							id: 3,
							name: 'js'
						}
					]
				},
				methods:{
					handleAdd(){
						let params = {
							id: this.list.length,
							name: this.input
						}
						this.list.push(params)
						this.input = ""
					},
					handleDelete(index,val){
						console.log(index);
						console.log(val)						
						this.list.splice(index,1)
					}
				}
			})
		</script>
	</body>
</html>