一、父子组件传参

首先创建子组件,子组件的名字为component1.vue

<template><div class=""><div class=""><span>接受父组件:{{name}}</span><el-button type="primary" @click="Forward()">打印父组件的信息</el-button></div></div>
</template><script>
export default {// 子组件通过props组件接收，name需要和父组件的key一致props:['name'],data() { return {}},mounted(){},methods:{Forward(){console.log(this.name);},},
}
</script>

然后在父组件中引用并向子组件传参

<template><div class=""><!--向子组件传入name参数--><Component1  :name="name"></Component1></div>
</template><script>
import Component1 from "./moudles/component1"
export default {components:{Component1},data () {return {name:"父组件信息发送",}},methods:{}
}
</script>

二、子组件向父组件传参

首先创建子组件，这里的名字为component2.vue

<template><div class=""><div class="">  <span>向父组件发送数据：{{childval}}</span><el-button type="primary" @click="reverse()">发送父组件的信息</el-button></div></div>
</template><script>
export default {data() { return {childval:"子组件的数据test"}},mounted(){},methods:{//子组件需要使用this.$emit()方法将参数传入父组件，第一个参数要和父组件绑定的方法名一致reverse(){this.$emit('childval',this.childval)}},
}
</script><style scoped></style>

然后配置父组件接收

<template><div class=""><p>父组件接收:{{valueName}}</p><Component2  @childval="childvalFun"></Component2></div>
</template><script>
import Component2 from "./moudles/component2" 
export default {components:{Component2},data () {return {valueName:null}},methods:{childval(data){this.valueName= dataconsole.log(data) //子组件传入的参数}}
}
</script>