组件介绍
概念：组件就是局部功能界⾯
作⽤：根据业务需求⾃定义组件，并实现组件复⽤
建议：组件在起名字的时候建议采⽤：公司-组件名的⽅法来命名，⽐如el-alert，如果是⾃⼰开发的组件，建议⽤：my-login这样格式来命名
注意：当使⽤ kebab-case (短横线分隔命名) 定义⼀个组件时，你也必须在引⽤这个⾃定义元素时使⽤kebab-case，例如 。当使⽤ PascalCase (⾸字⺟⼤写命名) 定义⼀个组件时，你在引⽤这个⾃定义元素时两种命名法都可以使⽤。也就是说 和 都是可接受的。注
意，尽管如此，直接在 DOM (即⾮字符串的模板) 中使⽤时只有 kebab-case 是有效的。
使⽤步骤：
1. ⾃定义组件
2. 在被使⽤的地⽅引⼊并注册到components中
3. ⽤⾃定义标签，标签名字就是定义的组件名字
示例：
Vue
<template>
<div>
<header-area></header-area>
</div>
</template>
<script>
import HeaderArea from './components/HeaderArea.vue';
export default {
// 定义属性
data() {
return {
}
},
components: { HeaderArea },
methods: {
},
}
</script>
<style lang='scss' scoped></style>
Vue
<template>
<div>
<h1>这是头部</h1>
</div>
</template>
<script>
export default {
// 定义属性
data() {
return {
}
},
methods: {
},
}
</script>
<style>
</style>⽗组件向⼦组件传值
作⽤：⽗组件向⼦组件传递参数
步骤：
1. 定义⼦组件
2. ⽗组件中使⽤⼦组件
3. 在引⽤⼦组件的时候将参数绑定在⼀个⾃定义的属性上去
4. ⼦组件⾥接收传值
示例：
⽗组件
Vue
<template>
<div>
<header-area :title="title"></header-area>
</div>
</template>
<script>
import HeaderArea from './components/HeaderArea.vue';
export default {
// 定义属性
data() {
return {
title: "⾸⻚"
}
},
components: { HeaderArea },
methods: {
},
}
</script>
<style lang='scss' scoped></style>⼦组件
Vue
<template>
<div>
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
// 定义属性
data() {
return {
}
},
props: ['title'],
// 另⼀种写法
// props: {
// title: {
// type: String,
// default: '默认标题',
// // required: true
// }
// },
methods: {
},
}
</script>
<style></style>Tips:
● ⼦组件⾥设置接收哪些属性的传值（可⽤数组形式设置，也可以⽤对象形式设置，前⾯必须写的是props）
● 在使⽤对象形式设置时，可以设置type、default、required等
● 在使⽤对象形式设置时，参数值类型（即type）不是只能写⼀个，它可以写很多个，只需要⽤数组写即可
● ⼀般required和default只写⼀个，因为如果default存在，那么required设置true就没有意义了
● 如果⽗组件调⽤⼦组件时定义的属性格式是：kebab-case的类型，那么⼦组件接收的时候要写成驼峰格式接收与使⽤
⼦组件向⽗组件传值
作⽤：⼦组件向⽗组件传值
步骤：
1. ⼦组件使⽤$emit来触发⽗组件的某个⽅法
2. ⼦组件触发的这个⽅法在⽗组件引⼊⼦组件时候要以⾃定义事件的⽅式绑定
3. ⽗组件中定义上⾯⾃定义事件触发的函数，执⾏逻辑
示例：
⼦组件
Vue
<template>
<div>
<h1>这是⾸⻚</h1>
<button @click="tellMsg">发送消息</button>
</div>
</template>
<script>
export default {
// 定义属性
data() {
return {
}
},
emits: ['getMsg'],
methods: {
tellMsg() {
this.$emit("getMsg", "我被点击了")
}
},
}
</script>
<style></style>⽗组件
Vue
<template>
<div>
<header-area @get-msg="onGetMsg"></header-area>
</div>
</template>
<script>
import HeaderArea from './components/HeaderArea.vue';
export default {
// 定义属性
data() {
return {
title: "⾸⻚"
}
},
components: { HeaderArea },
methods: {
onGetMsg(msg) {
alert(msg)
}
},
}
</script>
<style lang='scss' scoped></style>