Vue常用的父子组件之间的传值

Vue常用的父子组件之间的传值

1.父组件向子组件传值(通过props)

一.props为数组

(1) 父组件的代码块
template标签中的代码

<children :message="message"></children>

script中的代码

<script>
	import children from '../components/children.vue'
	export default{
		components:{
			children
		},
		data(){
			return{
				message:[
					{id:1,name:'张三',age:15},
					{id:2,name:'李四',age:18},
					{id:3,name:'王五',age:21},
				]
			}
		}
	}
</script>

(2)子组件中代码
template标签中的代码

<div class="children">
		{{message}}
</div>

script中的代码

export default{
	props:['message']
}

二.props为对象时

子组件中的script中的值

export default{
		props:{
			message:{
				type:Array,//可以设置传递内容的类型
				required:true,//表示是否为必传参数,值为true和false
				// 当为对象类型设置默认值时必须使用函数返回
				default: function () {
					return {
						message: 'Hello, world'
					}
				}
			}
		}
	}}

2.子组件向父组件传值(通过$emit())

父组件中的template的代码

<div class="nav3">
	<editToFather @edit="showInner"></editToFather>
	<p>{{message}}</p>
</div>

父组件中的script中的代码

<script>
	import editToFather from '../components/editToFather.vue'
	export default{
		components:{
			editToFather
		},
		data(){
			return{
				message:'我是原来的值'
			}
		},
		methods:{
			showInner(data){
				this.message=data
			}
		}
	}
</script>

子组件中的template中的代码

<template>
	<div class="editToFather">
		<button @click="editToFather">点我给父组件传值</button>
	</div>
</template>

子组件中的script中的代码

<script>
	export default{
		methods:{
			editToFather(){
				this.$emit('edit','我是子组件传给父组件的值')
			}
		}
	}
</script>

备注：子组件中的代码图片

父组件中的代码图片