Vue3 props为组件添加外部属性（附带实例）

我们在使用原生的 HTML 标签元素时，可以通过属性来控制元素的一些渲染行为，例如 style 属性可以设置元素的样式风格，class 属性可以设置元素的类等。自定义的组件的使用方式与原生 HTML 标签一样，也可以通过属性来控制其内部行为。

举个简单的例子，my-alert 组件在页面中渲染出一个按钮元素，此按钮的标题为字符串“按钮”，这个标题文案是写死在 template 模板字符串中的。无论我们创建多少个 my-alert 组件，其渲染出的按钮的标题都是一样的。如果我们需要在使用此组件时灵活地设置其按钮显示的标题，就需要使用组件中的 props 配置。

props 是 properties 的缩写，顾名思义为属性，props 定义的属性是提供给外部进行设置使用的，也可以将其称为外部属性。修改 my-alert 组件的定义如下：

const alertComponent = {
  // 定义外部属性
  props: ['title'],
  setup(props) {
    const msg   = "警告框提示";
    const count = ref(0);

    const click = () => {
      alert(msg + count.value++);   // 弹出提示框
    };

    return { msg, count, click };
  },
  // 在模板中可以直接使用插值语法来插入外部属性的值
  template: `<div><button @click="click">{{ title }}</button></div>`
};

props 选项用来定义自定义组件内的外部属性，组件可以定义任意多个外部属性，在 template 模板中，可以用访问内部 data 属性一样的方式来访问定义的外部属性。在使用 my-alert 组件时，可以直接设置 title 属性来设置按钮的标题，代码如下：

<my-alert title="按钮1"></my-alert>
<my-alert title="按钮2"></my-alert>

运行后的页面效果如下图所示：

图 1 自定义组件属性

props 也可以进行许多复杂的配置，例如类型检查、默认值等。另外，在 setup 函数中也可以访问外部属性，它会作为 setup 方法的第一个参数传入，例如：

// props 参数就是外部传入的属性对象
setup(props) {
  const msg   = "警告框提示";
  const count = ref(0);

  const click = () => {
    // 可以直接使用外部属性
    alert(props.title + msg + count.value++);  // 弹出提示框
  };

  return { msg, count, click };
}

还有一点需要注意，在 Vue 的整体设计中，数据始终是单向流动的，也就是说数据从父组件传递到子组件中，父组件可以更新数据并实时更新子组件，但是子组件不可以修改父组件传递进来的数据。

如果有业务场景需要修改，我们一般会通过事件将修改动作回调到父组件执行。

Vue3 props为组件添加外部属性（附带实例）

相关文章