组件间的魔力：Vue3的传值技巧

前端

2023-04-16 03:52:18

Vue3 组件传值指南：打造更强大的应用程序

简介

在构建 Vue3 应用程序时，组件化对于提高开发效率和代码可维护性至关重要。为了让组件之间无缝协作，传值是关键。本文将深入探讨 Vue3 中组件间传值的技巧，帮助您构建更强大的应用程序。

组件传值的两种方式

在 Vue3 中，组件间传值可以通过两种方式实现：

1. props

props 是子组件从父组件接收数据的属性。它们在子组件中通过 <props> 标签声明，并在父组件中通过 <template> 标签传递数据。子组件可以使用 this.props 访问父组件传递的数据。

// 子组件
<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

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


// 父组件
<template>
  <ChildComponent :name="name" :age="age"></ChildComponent>
</template>

<script>
export default {
  data() {
    return {
      name: 'John Doe',
      age: 30,
    };
  },
};
</script>

2. emit

emit 是子组件向父组件发送数据的事件。它们在子组件中通过 <emit> 标签声明，并使用 this.$emit 方法触发。父组件可以使用 <template> 标签监听子组件的事件并执行相应的操作。

// 子组件
<template>
  <button @click="handleClick">Send Data</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('sendData', { name: 'John Doe', age: 30 });
    },
  },
};
</script>


// 父组件
<template>
  <ChildComponent @sendData="handleData"></ChildComponent>
</template>

<script>
export default {
  methods: {
    handleData(data) {
      console.log(data); // { name: 'John Doe', age: 30 }
    },
  },
};
</script>

props 的详细使用

1. 声明式使用

props 可以通过 <props> 标签声明，并指定其类型和默认值。

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number,
  },
};
</script>

2. 动态使用

props 可以使用 <v-bind> 指令动态绑定。

<template>
  <ChildComponent :name="name" :age="age"></ChildComponent>
</template>

<script>
export default {
  data() {
    return {
      name: 'John Doe',
      age: 30,
    };
  },
};
</script>

3. 默认值

props 可以指定默认值，以便在父组件未提供数据时使用。

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: 'John Doe',
    },
    age: {
      type: Number,
      default: 30,
    },
  },
};
</script>

emit 的详细使用

1. 声明式使用

emit 事件可以通过 <emit> 标签声明，并指定其参数。

<template>
  <button @click="handleClick">Send Data</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('sendData', { name: 'John Doe', age: 30 });
    },
  },
};
</script>

2. 动态使用

emit 事件可以使用 <v-on> 指令动态绑定。

<template>
  <ChildComponent @sendData="handleData"></ChildComponent>
</template>

<script>
export default {
  methods: {
    handleData(data) {
      console.log(data); // { name: 'John Doe', age: 30 }
    },
  },
};
</script>

3. 参数

emit 事件可以传递任何类型的数据作为参数。

<template>
  <button @click="handleClick">Send Data</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('sendData', { name: 'John Doe', age: 30 });
    },
  },
};
</script>