vue3中组件传值的多种方法总结

下面是详细讲解“vue3中组件传值的多种方法总结”的完整攻略。

1. 组件传值概述

在vue3中，组件传值是非常常见的场景，通常包括父组件向子组件传值和子组件向父组件传值两种类型。

在vue3中，组件传值的方式主要包括如下几种：

1. 父组件向子组件传值(prop)
2. 子组件向父组件传值($emit)
3. 祖先组件向后代组件传值(provide/inject)
4. 跨级组件之间传值($attrs/$listeners)

下面我们分别来详细说明它们的用法和示例：

2. 父组件向子组件传值(prop)

父组件向子组件传值是最常见的一种方式，常见的写法是在父组件的标签中使用属性来向子组件传值。子组件中可以通过this.$props来访问这个属性，这个属性可以是普通的字符串、数字、对象等类型。

示例代码如下：

// 父组件
<template>
  <div>
    <child-component :msg="message"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue3!'
    }
  }
}
</script>

// 子组件
<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String
    }
  }
}
</script>

在这个示例中，父组件向子组件传递了一个名为message的值，子组件通过props接收到这个值，并显示在页面上。

3. 子组件向父组件传值($emit)

子组件向父组件传值通常都是通过事件来实现的，即子组件通过$emit方法触发一个自定义事件，父组件在子组件标签上监听该自定义事件，并执行相应的方法。

示例代码如下：

// 父组件
<template>
  <div>
    <child-component @change="handleChange"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <input type="text" v-model="inputValue" @input="handleInput">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleInput() {
      this.$emit('change', this.inputValue)
    }
  }
}
</script>

在这个示例中，子组件通过$emit方法触发一个名为change的自定义事件，并将inputValue的值作为参数传递给父组件，父组件监听该事件，并执行handleChange方法来处理接收到的参数。

4. 祖先组件向后代组件传值(provide/inject)

祖先组件向后代组件传值通常使用provide/inject来实现，provide/inject用于祖先组件向所有后代组件传递数据，后代组件可以通过inject来接收这些数据。需要注意的是，provide/inject建立的是一种祖先组件与后代组件之间的默默传递关系，不像props和$emit那样需要明确地进行传递和捕获，而且provide/inject提供的是一种全局的无障碍通道，便于数据的灵活传递。

示例代码如下：

// 祖先组件
<template>
  <div>
    <parent-component :color="color">
      <child-component></child-component>
    </parent-component>
  </div>
</template>

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

export default {
  components: {
    ParentComponent
  },
  provide() {
    return {
      color: 'red'
    }
  }
}
</script>

// 父组件
<template>
  <div :style="{ color: color }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: String
    }
  }
}
</script>

// 子组件
<template>
  <div>
    {{ color }}
  </div>
</template>

<script>
export default {
  inject: ['color']
}
</script>

在这个示例中，祖先组件给所有后代组件提供了一个名为color的数据，父组件和子组件都可以通过inject来接收这个数据，并在自己的模板中使用它。

5. 跨级组件之间传值($attrs/$listeners)

在vue3中，父子组件之间的传值已经可以通过props和$emit实现，但是在跨级组件中，由于存在多级组件嵌套，如果每个组件之间都需要通过props和$emit来传值，代码就会很复杂。这个时候，就可以使用$attrs和$listeners来实现跨级组件之间的数据传递。

$attrs包含了父组件在使用子组件时所有的属性，包括class和style等，而$listeners可以拿到父组件在子组件中绑定的所有事件。这样，就可以实现跨级组件之间的联动。

示例代码如下：

// 父组件
<template>
  <div>
    <ancestor-component :msg="message" @change="handleChange"></ancestor-component>
  </div>
</template>

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

export default {
  components: {
    AncestorComponent
  },
  data() {
    return {
      message: 'Hello Vue3!'
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

// 祖先组件
<template>
  <div>
    <parent-component v-bind="$attrs" v-on="$listeners">
      <slot></slot>
    </parent-component>
  </div>
</template>

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

export default {
  components: {
    ParentComponent
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component v-bind="$attrs" v-on="$listeners"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

// 子组件
<template>
  <div>
    <input type="text" v-model="inputValue" @input="handleInput">
    <button @click="handleClick">传递数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleInput() {
      this.$emit('change', this.inputValue)
    },
    handleClick() {
      this.$emit('transferData', this.inputValue)
    }
  }
}
</script>

在这个示例中，父组件通过$attrs和$listeners将所有的属性和事件都传递给祖先组件，祖先组件又将这些属性和事件传递给了父组件，父组件也通过$attrs和$listeners将这些属性和事件传递给了子组件，子组件在自己的模板中使用了input、button等标签，并向父组件传递数据。父组件和祖先组件监听了子组件的自定义事件change和transferData，并执行了相应的方法来处理接收到的数据。

这就是vue3中组件传值的多种方法总结的详细攻略，希望对你有所帮助。