子组件和子组件怎么互相传值

在父组件中，可以通过props将数据传递给子组件。而子组件想要将数据传递回父组件，则可以通过自定义事件（event）或者回调函数的方式进行。

使用props传递数据给子组件的示例代码如下：

// 父组件
<template>
  <div>
    <ChildComponent :dataProp="parentData" />
  </div>
</template>

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

export default {
  data() {
    return {
      parentData: 'Hello from parent!',
    };
  },
  components: {
    ChildComponent,
  },
};
</script>

// 子组件
<template>
  <div>
    <p>{{ dataProp }}</p>
  </div>
</template>

<script>
export default {
  props: ['dataProp'],
};
</script>

在上述示例中，父组件通过props向子组件传递了一个名为"dataProp"的属性，子组件则通过`props: ['dataProp']`接收并使用该属性。

如果子组件需要将数据传递回父组件，可以使用自定义事件或回调函数的方式。

使用自定义事件传递数据的示例代码如下：

// 子组件
<template>
  <div>
    <button @click="sendDataToParent">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('customEvent', 'Data from child!');
    },
  },
};
</script>

// 父组件
<template>
  <div>
    <ChildComponent @customEvent="handleCustomEvent" />
  </div>
</template>

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

export default {
  methods: {
    handleCustomEvent(data) {
      console.log(data);
    },
  },
  components: {
    ChildComponent,
  },
};
</script>

在上述示例中，子组件通过`this.$emit('customEvent', data)`触发自定义事件"customEvent"并传递数据给父组件。父组件通过`@customEvent="handleCustomEvent"`监听该事件，并在`handleCustomEvent`方法中接收子组件传递的数据。

使用回调函数传递数据的示例代码如下：

// 子组件
<template>
  <div>
    <button @click="sendDataToParent">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('customEvent', 'Data from child!');
    },
  },
};
</script>

// 父组件
<template>
  <div>
    <ChildComponent :callback="handleCallback" />
  </div>
</template>

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

export default {
  methods: {
    handleCallback(data) {
      console.log(data);
    },
  },
  components: {
    ChildComponent,
  },
};
</script>

在上述示例中，父组件通过props将一个名为"callback"的回调函数传递给子组件。子组件可以通过调用该回调函数并传递数据来将数据传递回父组件。父组件在回调函数中接收并处理子组件传递的数据。