携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
一。组件
1.什么是组件
组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。
2.注册组件
①。注册全局组件
Vue.component('my-component', {
// 选项
})
①。定义自定义组件
component方法第一个参数是组件的名称，
第二个参数是配置对象
②。在组件配置对象中，除了不可以写el选项，其他的选项都可以写
因为组件就是一个小型的Vue实例
②。注册局部组件
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用(组件名)
'my-component': Child
}
})
③。template 在写元素的时候有且只有一个根元素
template: `
<div class="tab">
<div class="title">{{title}}</div>
<div class="content">{{content}}</div>
</div>
`
④。props选项用于接收组件的属性传参( 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件)
props: ["title", "content"], //简写
//完整写法(可操作性高)
props: {
title: {
type: String, //类型
// required: true, //必传
// default:100 //默认值
},
content: {
type: String,
},
},
⑤。data（组件里的data必须是函数，有函数返回对象）
data() {
return {};
},
3。定义一个容器
<div class="root">
<b-tab
:title="item.titlebm"
:content="item.contentbm"
v-for="(item,index) in car"
:key="index"
></b-tab>
</div>
4.注册自定义组件
定义自定义组件（ component方法第一个参数是组件的名称， 第二个参数是配置对象）
Vue.component("b-tab", {
// 在组件配置对象中，除了不可以写el选项，其他的选项都可以写
// 因为组件就是一个小型的Vue实例
template: `
<div class="tab">
<div class="title">{{title}}</div>
<div class="content">{{content}}</div>
</div>
`,
props选项用于接收组件的属性传参
// props: ["title", "content"], //简写
//完整写法(可操作性高)
props: {
title: {
type: String, //类型
// required: true, //必传
// default:100 //默认值
},
content: {
type: String,
},
},
// 组件里的data必须是函数，有函数返回对象
data() {
return {};
},
});
new Vue({
el: ".root",
data: {
car: [
{
titlebm: "宝马",
contentbm:
"宝马（BMW），中文全称为巴伐利亚发动机制造厂股份有限公司，德国汽车品牌，宝马的车系有i、X、Z、纯数字4个车型，1、2、3、4、5、6、7、8等几个系列，还有在各系基础上进行改进的M系（宝马官方的高性能改装部门）",
},
{
titlebm: "奔驰",
contentbm:
"梅赛德斯-奔驰（Mercedes-Benz）是世界闻名的豪华汽车品牌。1886年1月，卡尔·本茨发明了世界上第一辆三轮汽车，获得专利（专利号：DRP 37435 [1] ），被誉为“汽车的发明者”。",
},
{
titlebm: "奥迪",
contentbm:
"奥迪（Audi），德国豪华汽车品牌，其标志为四个圆环相扣。现为德国大众汽车公司的子公司。2018年12月20日，2018世界品牌500强排行榜发布，奥迪位列51位。",
},
],
},
});
