详解vue中组件参数

下面我将详细讲解“详解vue中组件参数”的完整攻略。

引言

在Vue中，组件参数是指传递给组件的数据和选项。Vue组件的参数可以分为两类：props和attrs。props是父组件传递给子组件的数据，而attrs是指父组件传递给子组件的非props数据，比如style和class等。

props

props是指父组件传递给子组件的数据。props可以在子组件中通过props选项来声明。声明props的方式如下：

Vue.component('my-component', {
  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数，函数返回布尔值
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

父组件传递props参数给子组件的方式如下：

<my-component
  prop-a="1"
  prop-b="hello"
  prop-c="world"
  prop-f="11"
></my-component>

在子组件中，可以通过this.$props访问父组件传递过来的props参数，也可以通过props选项声明props参数：

Vue.component('my-component', {
  props: ['propA', 'propB', 'propC', 'propD', 'propE', 'propF'],
  template: '<div>{{ propA }}, {{ propB }}, {{ propC }}, {{ propD }}, {{ propE }}, {{ propF }}</div>',
})

注意：在props中声明的属性，如果没有指定类型，数据类型默认为String。如果父组件没有传入对应的props属性，则该属性的值为undefined。

attrs

attrs是指父组件传递给子组件的非props数据，比如style和class等。attrs可以在子组件中通过$attrs选项来访问。在render函数中，attrs可以是一个对象，也可以是一个返回对象的函数。attrs可以用来绑定class、style等等。示例如下：

Vue.component('my-component', {
  render: function (h) {
    return h('input', {
      attrs: {
        type: 'text',
        class: 'form-control',
        style: 'width: 100%'
      },
    })
  }
})

在父组件中，如果要传递attrs参数给子组件，则可以通过特殊的v-bind指令，将父组件中的数据传递给子组件。示例如下：

<my-component v-bind="$attrs"></my-component>

上面的例子将父组件中的$attrs对象传递给子组件，子组件可以直接使用$attrs对象绑定class、style等。

总结

通过本篇文章的介绍，我们了解到了Vue中组件参数的两种类型：props和attrs。props可以在子组件中通过props选项来声明，也可以通过this.$props来访问。而attrs则可以通过$attrs来访问，用来绑定class、style等。我们需要根据实际需求，合理使用props和attrs来传递数据。