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

最简单的声明组件

import Vue from 'vue'new Vue({ el: '#root', template: '123' })

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

const component = { template: 'This is component' }Vue.component('CompOne', component)new Vue({ el: '#root', template: '' })

局部注册组件通过组件 options 中的 components 选项来做。

const component = { template: 'This is component' }new Vue({ components: { CompOne: component }, el: '#root', template: '' })

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

const component = { template: '{{text}}', data () { return { text: 123 } } }new Vue({ components: { CompOne: component }, el: '#root', template: '' })

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

const data = https://www.it610.com/article/{ text: 0 } const component = { template: ``, data () { return data } }new Vue({ components: { CompOne: component }, el: '#root', template: ` ` })

定义组件时，使用 props props 定义组件在外部使用时一些可配置的行为。
props 类型检查
指定传入数据类型。
如果不使用绑定模式，直接使用 active="true"，传入组件的就是字符串，vue 会发出警告。

const component = { props: { active: Boolean }, template: ` see me if active`, data () { return { text: 0 } } }new Vue({ components: { CompOne: component }, el: '#root', template: ` ` })

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

const component = { props: { propOne: String }, template: `{{propOne}}` }new Vue({ components: { CompOne: component }, el: '#root', template: ` ` })

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

const component = { props: { propOne: String }, template: `{{propOne}}`, mounted () { this.propOne = 'inner content' } }new Vue({ components: { CompOne: component }, el: '#root', template: ` ` })

修改 props
子组件触发事件，通知父组件来改 props。
通过 props 传方法如下，点击 text1 多一个 1

const component = { props: { propOne: String, onChange: Function }, template: `{{propOne}}`, data () { return { text: 0 } }, methods: { handleChange () { this.onChange() } } }new Vue({ components: { CompOne: component }, el: '#root', data: { prop1: 'text1' }, methods: { handleChange () { this.prop1 += 1 } }, template: `` })

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

const component = { props: { propOne: String }, template: `{{propOne}}`, 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: `` })

props 的数据验证
不验证这样简单，但不严谨