Vue 子组件传数据到父组件：使用 props 和 $emit

///'在 Vue 中，你可以通过使用 props 和 $emit 来将子组件查询的数据传递到父组件。//n//n首先，在父组件中，你需要定义一个数据属性，然后将它作为一个 props 传递给子组件。例如，假设你在父组件中定义了一个名为 parentData 的数据属性：//n//njavascript//n<template>//n <div>//n <child-component :childData=/'parentData/'></child-component>//n </div>//n</template>//n//n<script>//nimport ChildComponent from './ChildComponent.vue'//n//nexport default {//n components: {//n ChildComponent//n },//n data() {//n return {//n parentData: ''//n }//n }//n}//n</script>//n//n//n接下来，在子组件中，你可以使用 props 接收父组件传递的数据，并在需要的时候将它传递给父组件。例如，假设你在子组件中定义了一个名为 childData 的 props：//n//njavascript//n<template>//n <div>//n <input v-model=/'childData/'>//n <button @click=/'sendDataToParent/'>发送数据给父组件</button>//n </div>//n</template>//n//n<script>//n export default {//n props: ['childData'],//n methods: {//n sendDataToParent() {//n this.$emit('data-updated', this.childData)//n }//n }//n}//n</script>//n//n//n在子组件中，我们使用 v-model 将输入框中的值绑定到 childData 上，并通过 $emit 方法触发一个名为 data-updated 的自定义事件，并将 childData 作为参数传递给父组件。//n//n最后，在父组件中，你可以通过监听子组件触发的自定义事件来接收子组件传递的数据。例如，你可以在父组件的 <child-component> 标签上添加一个 @data-updated 事件监听：//n//njavascript//n<template>//n <div>//n <child-component :childData=/'parentData/' @data-updated=/'updateParentData/'></child-component>//n </div>//n</template>//n//n<script>//nimport ChildComponent from './ChildComponent.vue'//n//nexport default {//n components: {//n ChildComponent//n },//n data() {//n return {//n parentData: ''//n }//n },//n methods: {//n updateParentData(data) {//n this.parentData = data//n }//n }//n}//n</script>//n//n//n在 updateParentData 方法中，我们将子组件传递的数据更新到父组件的 parentData 属性上，从而实现了子组件查询的数据传递到父组件中。//n//n/