面试题：Vue中v-bind动态属性绑定的中等难度应用

Question

假设我们有一个自定义组件 <my - component>，它有一个名为 'active' 的布尔类型属性用于控制组件的激活状态。现在要求在父组件中，根据一个数据变量 isActiveStatus 的值动态绑定 'active' 属性。请写出父组件模板和 data 选项中的相关代码。并且说明 v - bind 在这里的作用和原理。

Answer 1

父组件模板代码

<template>
  <my-component :active="isActiveStatus"></my-component>
</template>

data选项中的代码

export default {
  data() {
    return {
      isActiveStatus: false // 这里初始值设为false，实际可根据需求设置
    };
  }
};

v-bind的作用和原理

• 作用：v-bind 用于动态绑定一个或多个特性，在这里它将父组件中的 isActiveStatus 变量与子组件 <my - component> 的 active 属性进行动态绑定。使得当 isActiveStatus 的值发生变化时，子组件的 active 属性值也会相应更新，从而影响子组件的激活状态。
• 原理：Vue.js 会在解析模板时，遇到 v-bind 指令，它会在组件实例创建时，将绑定的表达式（这里是 isActiveStatus）与组件的响应式数据系统建立联系。当响应式数据 isActiveStatus 的值发生改变时，Vue 会检测到变化，并根据新的值重新渲染相关的 DOM 节点，在这个场景下就是更新 <my - component> 组件的 active 属性值，触发子组件根据新的 active 值进行相应的状态更新。