当前位置：首页 > news >正文

Vue2与Vue3中TS子组件传值给父组件

news 来源：原创 2025/5/1 6:20:07

Vue2

父组件在使用子组件时：父组件通过 v-model:activeNav 来将 activeNav 和子组件的值绑定在一起。

<!-- 父组件 Parent.vue -->
<template>
  <Child v-model:activeNav="activeNav" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Child from './Child.vue';

export default defineComponent({
  name: 'Parent',
  components: {
    Child
  },
  setup() {
    const activeNav = ref<string>('home');

    return {
      activeNav
    };
  }
});
</script>

子组件触发事件更新 activeNav:子组件通过 emit('update:activeNav', newValue) 来触发事件，并向父组件传递新的值，从而更新父组件中的 activeNav 属性。

<!-- 子组件 Child.vue -->
<template>
  <button @click="changeActiveNav">切换导航</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Child',
  methods: {
    changeActiveNav() {
      const newNav = 'about'; // 假设要切换到 'about' 页面
      this.$emit('update:activeNav', newNav);
    }
  }
});
</script>

事件名称 update:activeNav：
- 当父组件使用 v-model:activeNav 时，它实际上会监听子组件触发的 update:activeNav 事件，并将事件传递的数据（newNav）作为新的值更新到 activeNav 上。
v-model 的双向绑定机制：
- 当子组件通过 this.$emit('update:activeNav', newNav) 触发事件时，父组件接收到这个事件后，Vue 会自动更新 activeNav 的值，形成双向绑定。
update:<propName> 的命名规范：
- 在 Vue 3 中，v-model 的默认事件名称是 update:<propName>，这里的 <propName> 对应的是通过 v-model 绑定的属性名（在这个例子中是 activeNav）

update:activeNav 是为了配合 v-model:activeNav 进行双向数据绑定的事件名称。当子组件触发该事件时，父组件会接收到新的值，从而更新绑定的 activeNav 属性，实现父子组件之间的通信和数据同步。

Vue3

父组件 Parent.vue：在父组件中，使用 v-model:activeNav 来绑定 activeNav 属性。

<!-- Parent.vue -->
<template>
  <Child v-model:activeNav="activeNav" />
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const activeNav = ref('home'); // 初始化导航值
</script>

子组件 Child.vue：在子组件中，当某个操作（如按钮点击）触发时，使用 $emit 触发 update:activeNav 事件来通知父组件更新 activeNav 的值。

<!-- Child.vue -->
<template>
  <button @click="changeActiveNav">切换导航</button>
</template>

<script setup>
import { defineEmits } from 'vue';

// 定义事件
const emit = defineEmits(['update:activeNav']);

function changeActiveNav() {
  const newNav = 'about'; // 假设要切换到 'about' 页面
  emit('update:activeNav', newNav); // 触发更新事件
}
</script>

关键点

父组件使用 v-model:activeNav：
- 在父组件中，通过 v-model:activeNav="activeNav" 来将 activeNav 与子组件的值进行绑定。
- 当子组件触发 update:activeNav 事件时，activeNav 会自动更新为事件传递的值。
子组件使用 emit('update:activeNav', newNav)：
- 子组件通过 emit 触发 update:activeNav 事件，并将新的值（如 'about'）传递给父组件。
- 触发该事件后，父组件中的 activeNav 会自动更新为新的值。
defineEmits：
- 在子组件中，使用 defineEmits 来定义子组件会发出的事件，update:activeNav 就是这里的一个事件名。