如何提取Vue组件Props为类型并提升作用域简化属性访问？

一、先优化Props的类型定义（替代类方案） #

用 TypeScript 接口替代类来定义 Props 类型更贴合 Vue 场景——类作为 prop.type 是做运行时实例校验，而实际开发中父组件通常传递普通对象，用接口仅做编译时类型检查，更灵活：

Vue2 + TypeScript

// 定义CardLink的类型接口
export interface CardLinkProps {
  text: string;
  url: string;
}

// 子组件中定义props
import { PropType } from 'vue';

export default {
  props: {
    content: {
      type: Object as PropType<CardLinkProps>,
      required: true
    }
  }
}

// 父组件接收数组类型props
export default {
  props: {
    links: {
      type: Array as PropType<CardLinkProps[]>,
      required: true
    }
  }
}

Vue3 + TypeScript（组合式API）

// 定义CardLink的类型接口
export interface CardLinkProps {
  text: string;
  url: string;
}

// 子组件中使用defineProps
const props = defineProps<{
  content: CardLinkProps
}>()

// 父组件接收数组类型props
const props = defineProps<{
  links: CardLinkProps[]
}>()

二、将content的属性提升到作用域顶部（无需写content.xxx） #

根据Vue版本不同，有两种可靠实现方式，均保持响应式：

Vue2 实现方式

方式1：计算属性解构（推荐，清晰可控）

手动或自动生成对应属性的计算属性，直接访问即可：

export default {
  props: {
    content: {
      type: Object as PropType<CardLinkProps>,
      required: true
    }
  },
  computed: {
    // 手动解构适合属性少的情况
    text() {
      return this.content.text;
    },
    url() {
      return this.content.url;
    }
    // 属性多可以用自动生成：
    // ...Object.keys(CardLinkProps).reduce((acc, key) => {
    //   acc[key] = () => this.content[key];
    //   return acc;
    // }, {})
  },
  methods: {
    handleClick() {
      // 直接访问this.text、this.url
      console.log(this.text, this.url);
    }
  }
}

方式2：监听content并绑定响应式属性

适合属性较多的场景，自动同步content的所有属性：

import Vue from 'vue';

export default {
  props: {
    content: {
      type: Object as PropType<CardLinkProps>,
      required: true
    }
  },
  created() {
    // 初始化绑定属性并设为响应式
    Object.entries(this.content).forEach(([key, val]) => {
      Vue.set(this, key, val);
    });
    // 监听content变化，自动更新绑定的属性
    this.$watch('content', (newContent) => {
      Object.entries(newContent).forEach(([key, val]) => {
        Vue.set(this, key, val);
      });
    }, { deep: true });
  },
  methods: {
    handleClick() {
      console.log(this.text, this.url);
    }
  }
}

Vue3 实现方式（组合式API）

用toRefs直接解构响应式属性，保持响应式的同时无需重复写content.xxx：

import { defineProps, toRefs } from 'vue';
import type { CardLinkProps } from './types';

const props = defineProps<{
  content: CardLinkProps
}>();

// 解构content的属性，单个属性仍保持响应式
const { text, url } = toRefs(props.content);

// 脚本中访问需加.value，模板中直接用text/url
console.log(text.value, url.value);

如果用Vue3选项式API，可在setup中解构后返回，挂载到实例上直接访问：

import { defineComponent, toRefs } from 'vue';
import type { CardLinkProps } from './types';

export default defineComponent({
  props: {
    content: {
      type: Object as PropType<CardLinkProps>,
      required: true
    }
  },
  setup(props) {
    const { text, url } = toRefs(props.content);
    return { text, url };
  },
  methods: {
    handleClick() {
      console.log(this.text, this.url);
    }
  }
})

内容的提问来源于stack exchange，提问作者Osa