父子组件传值
父组件传值给子组件
主要通过props
// 1、创建一个子组件
<template>
<div>子组件</div>
</template>
// 2、创建一个父组件
<template>
<div>父组件</div>
</template>
<script>
export default {
data(){
return{
msg:'我是要传给子组件的data数据',
}
}
}
</script>
// 3、将父组件中的msg参数用v-bind绑定,传给子组件(son是自定义的属性)
//父组件
<child :son="msg">子组件</child>
//子组件
props:["son"],//用过props 来接收父组件传来的参数
console.log(this.son)//可获得父组件中的msg
注意:props接收的参数只读,不能进行修改。
子组件给父组件传值
主要通过this.$emit(‘函数’,要传的参数)
//子组件
this.$emit('getchildp',1)
//父组件
<child @getchildp="getmsg"></child>
getmsg(e){
console.log(e) //1
}