vue 父子组件之间的数据传递

时间:2022-07-18 22:03:42

子调父 $emit (把子组件的数据传给父组件)

父调子 $refs (把父组件的数据传给子组件)


父向子传值  (最终想要的是this.fathermessage)

父组件:

1.<template>里面

<pan-kou fathermessage = 向子组件传的值><pan-kou>

2.import panKou from './components/PanKou.vue'

3.components:{panKou}

子组件:

1.props:[fathermessage ]

2.在子组件用的时候,直接this.fathermessage就拿到了

 

子向父传值(最终想要的是子组件msg的值传给了父组件里childWords

父组件:

1.<template>里面

<pan-kou @child-tell-me-something=listenToMyBoy></pan-kou>

//(这里的child-tell-me-something是自定义事件,就和click一样)

2.import panKou from './components/PanKou.vue'

3.data里面

childWords : “”

4.methods:{

listenToMyBoy: function(msgWant){

//(msgWant是形参,接收子组件传递过来的值)

This.childWords = msgWant

}

}

子组件:

1.<template>里面

<button @click=onClickMe><button>

2.data里面

msg:hello form pankou!

3.methods:{

onClickMe: function(){

This.$emit(child-tell-me-something,this.msg)

//(第一个参数触发的事件,第二个参数就是要给父组件传的值)

}

}