1.父子组件
1.1父传子：子组件通过 props将需要获取传递值的变量展示出来，父组件通过import引入子组件，并通过v-bind绑定需要传递的值
父文件
<template>
<div>
<test1 :data1=‘mgs‘></test1>
</div>
</template>
<script>
import test1 from ‘@/components/component/test1.vue‘
export default {
data() {
return {
mgs:‘heheheh‘
}
},
components:{test1}
}
</script>
子文件
<template>
<div>
<h1>{{data1}}</h1>
</div>
</template>
<script>
export default {
props:["data1"]
}
</script>
1.2子传父：子组件通过$emit的方式将参数传递给父组件
父文件
<template>
<div>
<div>{{mgs}}</div>
<test1 @fromTest=‘fromTest‘></test1>
</div>
</template>
<script>
import test1 from ‘@/components/component/test1.vue‘
export default {
data() {
return {
mgs:‘‘
}
},
methods:{
fromTest(data){
this.mgs=data
}
},
components:{test1}
}
</script>
子文件
<template>
<div>
<button @click="toParent">点击一下</button>
</div>
</template>
<script>
export default {
data() {
return {
mgs:‘我是要传递的值‘
}
},
methods:{
toParent(){
this.$emit(‘fromTest‘,this.mgs)
}
}
}
</script>
原文：https://www.cnblogs.com/lipu12281/p/12025133.html