网站管理的主要工作有哪些_重庆沙坪坝区_浙江seo关键词_企业网站定制开发

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>

1. 事件名称 update:activeNav：

   • 当父组件使用 v-model:activeNav 时，它实际上会监听子组件触发的 update:activeNav 事件，并将事件传递的数据（newNav）作为新的值更新到 activeNav 上。

2. v-model 的双向绑定机制：

   • 当子组件通过 this.$emit('update:activeNav', newNav) 触发事件时，父组件接收到这个事件后，Vue 会自动更新 activeNav 的值，形成双向绑定。

3. 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>

关键点

1. 父组件使用 v-model:activeNav：

   • 在父组件中，通过 v-model:activeNav="activeNav" 来将 activeNav 与子组件的值进行绑定。

   • 当子组件触发 update:activeNav 事件时，activeNav 会自动更新为事件传递的值。

2. 子组件使用 emit('update:activeNav', newNav)：

   • 子组件通过 emit 触发 update:activeNav 事件，并将新的值（如 'about'）传递给父组件。

   • 触发该事件后，父组件中的 activeNav 会自动更新为新的值。

3. defineEmits：

   • 在子组件中，使用 defineEmits 来定义子组件会发出的事件，update:activeNav 就是这里的一个事件名。

   在 Vue 3 中，使用 v-model:propName 来绑定指定的 prop，当子组件需要更新该 prop 的值时，可以通过 emit('update:propName', newValue) 来触发事件并将新值传递给父组件，实现双向绑定。