vue实现父子组件传值的代码

可以使用props和emit来实现父子组件之间的数据传递，具体代码实现可以参考以下示例：

// 子组件
<template>
<div>
<p>子组件接收到的父组件的数据为：{{dataFromParent}}</p>
<button @click="sendDataToParent">向父组件发送数据</button>
</div>
</template>

<script>
export default {
props: {
dataFromParent: {
type: String,
default: ''
}
},
methods: {
sendDataToParent() {
this.$emit('send-data-to-parent', '子组件发送的数据')
}
}
}
</script>

// 父组件
<template>
<div>
<p>父组件传递给子组件的数据为：{{dataToChild}}</p>
<child-component :dataFromParent="dataToChild" @send-data-to-parent="getDataFromChild"></child-component>
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
components: {
ChildComponent
},
data() {
return {
dataToChild: '父组件传递的数据'
}
},
methods: {
getDataFromChild(data) {
console.log(`父组件接收到子组件传递的数据为：${data}`)
}
}
}
</script>