面试题：Vue中如何实现组件的动态属性绑定

在Vue组件开发中，假设你有一个自定义组件 <my - component>，它接收一个名为 'text' 的属性用于显示文本内容。请描述如何将一个数据变量动态绑定到这个 'text' 属性上，以便数据变化时，组件显示的文本也能实时更新。同时说明在模板语法和组件定义中的相关写法。

27.0万热度

难度

前端开发Vue

模板语法：假设在Vue实例中有一个数据变量 message，在使用 <my - component> 组件时，可以这样动态绑定 text 属性：

<my - component :text="message"></my - component>

这里使用了 : 前缀，这是Vue中绑定动态属性的语法糖，等价于 v - bind:text="message"。

export default {
  name: 'MyComponent',
  props: {
    text: {
      type: String,
      required: true
    }
  }
}

在组件模板中，可以通过 this.text 访问这个属性（如果是在模板的HTML部分直接写，就直接写 {{text}}）：

<template>
  <div>
    {{text}}
  </div>
</template>

这样，当 message 数据变量发生变化时，<my - component> 组件显示的文本也会实时更新。

星途面试题库