在Vue中，组件传参

在Vue中，组件传参主要有以下几种方式：

父组件向子组件传递数据使用props。

使用$emit来触发事件并传递数据到父组件。

使用v-model进行双向数据绑定。

使用provide和inject实现跨多层级的组件传递数据。

以下是这些方式的简单示例：

使用props：

父组件：

<template>
  <ChildComponent :parentData="dataFromParent" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataFromParent: 'Hello from parent'
    };
  }
};
</script>

子组件：

<template>
  <div>{{ parentData }}</div>
</template>
 
<script>
export default {
  props: ['parentData']
};
</script>

使用$emit：

子组件：

<template>
  <button @click="sendToParent">Send to Parent</button>
</template>
 
<script>
export default {
  methods: {
    sendToParent() {
      this.$emit('childEvent', 'Data from child');
    }
  }
};
</script>

父组件：

<template>
  <ChildComponent @childEvent="receiveFromChild" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveFromChild(data) {
      console.log('Data received from child:', data);
    }
  }
};
</script>

使用v-model：

子组件：

<template>
  <input :value="value" @input="updateValue($event.target.value)" />
</template>
 
<script>
export default {
  props: ['value'],
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    }
  }
};
</script>

父组件：

<template>
  <ChildComponent v-model="message" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  }
};
</script>

使用provide和inject：

父组件：

<template>
  <ChildComponent />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      parentData: 'Data from parent'
    };
  }
};
</script>

子组件：

<template>
  <div>{{ parentData }}</div>
</template>
 
<script>
export default {
  inject: ['parentData']
};
</script>