Vue核心知识-Vue的组件之组件的定义

最简单的声明组件

import Vue from 'vue'

new Vue({
  el: '#root',
  template: '<div>123</div>'
})

全局注册组件

官方推荐，定义组件名，大写开头以及驼峰式命名，在模板中使用时，使用小写连接符的方式。

const component = {
  template: '<div>This is component</div>'
}

Vue.component('CompOne', component)

new Vue({
  el: '#root',
  template: '<comp-one></comp-one>'
})

局部注册组件

通过组件 options 中的 components 选项来做。

const component = {
  template: '<div>This is component</div>'
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  template: '<comp-one></comp-one>'
})

定义组件时，使用 data

定义组件时，使用 data 定义组件内数据时（不是 new Vue() 这种情况），data 需要改成 function，并返回一个单独的对象，不要使用全局的对象来做。

const component = {
  template: '<div>{{text}}</div>',
  data () {
    return {
      text: 123
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  template: '<comp-one></comp-one>'
})

如果不是单独的对象，组件复用时，数据会共用。如下例中，text 数据是共用的。

const data = {
  text: 0
}
const component = {
  template: `
    <div>
      <input type="text" v-model="text"/>
    </div>
  `,
  data () {
    return data
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  template: `
    <div>
      <comp-one></comp-one>
      <comp-one></comp-one>
    </div>
  `
})

定义组件时，使用 props

props 定义组件在外部使用时一些可配置的行为。

props 类型检查

指定传入数据类型。

如果不使用绑定模式，直接使用 active="true"，传入组件的就是字符串，vue 会发出警告。

const component = {
  props: {
    active: Boolean
  },
  template: `
    <div>
      <input type="text" v-model="text"/>
      <span v-show="active">see me if active</span>
    </div>
  `,
  data () {
    return {
      text: 0
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  template: `
    <div>
      <comp-one :active="true"></comp-one>
      <comp-one :active="false"></comp-one>
    </div>
  `
})

props 命名

命名时使用驼峰式命名

在模板中使用时，使用小写连接符的方式(在模板中也可以使用驼峰式写法，与团队成员协商)。

const component = {
  props: {
    propOne: String
  },
  template: `
    <div>
      <span>{{propOne}}</span>
    </div>
  `
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  template: `
    <div>
      <comp-one prop-one="text1"></comp-one>
      <comp-one propOne="text2"></comp-one>
    </div>
  `
})

不要子组件中改 props

直接改 props 能够修改成功，但是 vue 会警告，在组件内部主动改 props 是不正确的，props 是外部组件用来约束子组件展示行为的，所以有违初衷约束。

const component = {
  props: {
    propOne: String
  },
  template: `
    <div>
      <span>{{propOne}}</span>
    </div>
  `,
  mounted () {
    this.propOne = 'inner content'
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  template: `
    <div>
      <comp-one prop-one="text1"></comp-one>
      <comp-one propOne="text2"></comp-one>
    </div>
  `
})

修改 props

子组件触发事件，通知父组件来改 props。

通过 props 传方法

如下，点击 text1 多一个 1

const component = {
  props: {
    propOne: String,
    onChange: Function
  },
  template: `
    <div>
      <span @click="handleChange">{{propOne}}</span>
    </div>
  `,
  data () {
    return {
      text: 0
    }
  },
  methods: {
    handleChange () {
      this.onChange()
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  data: {
    prop1: 'text1'
  },
  methods: {
    handleChange () {
      this.prop1 += 1
    }
  },
  template: `
    <div>
      <comp-one :active="true" :prop-one="prop1" :on-change="handleChange"></comp-one>
    </div>
  `
})

通过 $emit

通过 $emit 通知父组件的方式，比较常用。

const component = {
  props: {
    propOne: String
  },
  template: `
    <div>
      <span @click="handleChange">{{propOne}}</span>
    </div>
  `,
  data () {
    return {
      text: 0
    }
  },
  methods: {
    handleChange () {
      this.$emit('change')
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  data: {
    prop1: 'text1'
  },
  methods: {
    handleChange () {
      this.prop1 += 1
    }
  },
  mounted () {
    console.log(this.$refs.comp1)
  },
  template: `
    <div>
      <comp-one ref="comp1" :active="true" :prop-one="prop1" @change="handleChange"></comp-one>
    </div>
  `
})

props 的数据验证

不验证

这样简单，但不严谨

props: ['active', 'propOne']

验证数据类型

props: {
    active: {
      type: Boolean
    },
    propOne: String // 简洁写法
  },

required

设置 required: true ，则 active 必须要传，否则 vue 警告。

props: {
    active: {
      type: Boolean,
      require: true 
    }
  },

default

default 默认是 false，如果设置为 true，当我们没有传 active 时，它会设置 active 为 true。

default 和 requied 不会同时使用，因为效果冲突。

props: {
    active: {
      type: Boolean,
      default: true
    },
    propOne: String
  },

如果 props 接收的是一个对象，使用 default 时，需要改成 function，返回单独的对象。

props: {
    obj: {
      type: obj
      dafault () {
          return {}
      }
    }
  },

validator

通过 validator，可以自定义的对 props 进行验证。

下例，vue 对 active 的数据类型也会进行验证。

props: {
    active: {
      validator (value) {
        return typeof value === 'boolean'
      }
    }
  },

总结

组件定义方法、规范，命名规范，props 规范