父子组件间传值和传方法
一、传值
1、父组件 传值给 子组件
父组件中:
//在父组件中引入子组件,并传入子组件内需要的值 <template> <div> <div>父组件</div> <!--(3)--> <child :message="parentMsg"></child> </div> </template> <script> import child from './child' //(1)引入child组件 export default { data() { return { parentMsg: '传给子组件的值' //(2)在data中定义需要传入的值 } }, components: { child } } </script>
子组件中:
//在子组件中注册props,并使用父组件中传递过来的数据 <template> <div> <div>{{message}}</div> </div> </template> <script> export default { props: { message: String //定义传值的类型<br> }, //或者props:["message"] data: {} } </script> <style> </style>
2、子组件 传值给 父组件
在父组件中
//自定义事件childFn,事件名为parentFn(parentFn事件用于接收子组件传递过来的值) <parent @childFn="parentFn"></parent > data: { message: '' }, methods: { parentFn(payload) { this.message = payload; } }
在子组件中:
//点击send按钮触发sendMes事件,把message传给父组件 <button @click="sendMes">Send</button> data() { return { // 默认 message: '我是子组件的消息' } }, methods: { sendMes() { this.$emit('childFn', this.message); } }
二、调用方法
1、父组件 调用 子组件的方法
在父组件中
<template> <div @click="parentMethod"> <children ref="mychild"></children> </div> </template> <script> import children from 'children.vue' export default { data(){ return { } }, components: { children }, methods:{ parentMethod() { this.$refs.mychild.childMethod(); } } } </script>
在子组件中
<template> <div> </div> </template> <script> export default { data(){ return { } }, methods:{ childMethod() { alert('My name is asd') } } } </script>
2、子组件 调用 父组件的方法
在父组件中
<template> <div> <asd @listenToChildEvent="showMsgFromChild"></asd> <div>{{ sss }}</div> </div> </template> <script> import asd from './compontents/asd.vue' export default { components:{asd}, data () { return { sss:'' } }, methods: { showMsgFromChild(data){ this.sss = data }, } } </script>
在子组件中
<template> <button @click="sendMsgToParent()"> 我是子组件,点击我向父组件传值 </button> </template> <script> export default { data(){ return { message:'我是子组件的数据' } }, methods:{ sendMsgToParent() { this.$emit("listenToChildEvent",this.message) } } } </script>