组件是可复用的 Vue 实例,都有data、computed、watch、methods 以及生命周期钩子等
组件命名
可在Vue官方提供的代码风格指南中查阅相关命名规则
// PascalCase(驼峰命名)
MyComponent.vue
// 连接符命名
my-component.vue
都可以通过以下两种方式引用组件
<MyComponent></<MyComponent>
<my-component></my-component>
子组件的生命周期
<Home title="父组件">
<Text title="子组件"></Text>
</Home>
home created
text created
text mounted
home mounted
通过 Prop 向子组件传递数据
子组件通过props属性接收父组件传递的值(传递值的类型:String、Number、Number、Array、Object、Function)
export default {
props: ['title'],
data () {
return {
text: '077'
}
},
created() {
console.log(this.title, this.text) // 通过this调用props与data中的变量
},
}
// 子组件中使用props与data中的变量
<div>
<span>{{ title }}</span>
<span>{{ text }}</span>
</div>
父组件中使用子组件并传值
<MyComponent :title="title"></<MyComponent>
prop 大小写
// 子组件 驼峰命名
props: ['postTitle']
// 父组件 使用连接线方式调用
<MyText post-title="hello world"></MyText>
prop 类型
// 子组件通过数组字符串接收,没有指定验证
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
上面这种写法行得通,但是不推荐,接收父组件传递的参数最好需要指定的值类型 / 是否必传 / 默认值是什么。这在开发一个会被别人用到的组件时尤其有帮助
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
单向数据流:父级 prop 的更新会向下流动到子组件中,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值.。但是反过来则不行,不应该在一个子组件内部改变 prop。
试图改变一个 prop 的情形:子组件希望对prop数据进行操作或转换,可以使用data或计算属性把它“拷贝”一份再进行操作
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
监听子组件事件
// Home.vue组件
<Home>
<Text v-on:watch-console="handleConsole"></Text>
</Home>
handleConsole() {
console.log('Child Call')
}
父组件监听watchConsole,如果子组件触发watchConsole,父组件则调用组件内handleConsole函数
// Text.vue子组件
this.$emit('watch-console')
子组件传递参数,父组件接收
// 父组件接收
handleConsole(params) {
console.log('Child Call', params)
}
// 子组件传递(参数可以是任意类型)
const params = { a: 1 }
this.$emit('watch-console', params)
事件名:推荐你始终使用 kebab-case 的事件名