一、组件简介
1. 组件的概念
组件是html、css与js的集合体。给该集合体命名后，可以通过名字对组件进行复用。
2. 组件分类
a. 根组件
用new Vue()生成的组件。
b. 局部组件
组件名 = {}, ‘{}’内部采用vue语法。
c. 全局组件
Vue.component('组件名',{}), ‘{}’内部采用vue语法。
3. 组件的特点
a. 组件都有管理组件html页面结果的template实例成员，template中有且只有一个跟标签。
b. 根组件可以不明确template，template默认采用挂载点页面结构；如果设置的template，挂载点内部的内容无效，因为会被替换。
c. 根组件都是作为最顶层父组件，局部与全局组件作为子组件，也可以成为其他局部与全局组件的父组件。
d. 子组件的数据需要隔离（数据组件化，每一个组件拥有自己数据的独立名称空间）
e. 局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件。
f. 组件中出现的所有变量（模板中、逻辑中），由该组件自己提供管理。
g. 局部全局和根组件都是一个vue实例，一个实例对应一套html、css、js结构，所以实例就是组件二、子组件
1. 局部组件
a. 声明组件
let localTag = {
template: `
美女
`,
methods: {
fn() {
console.log(this)
}
}
};
b. 注册组件
new Vue({
el: '#app',
data: {},
components: { // 注册组件
localTag,
}
})
c. 渲染组件
大长腿
`,
methods: {
fn() {
console.log(this)
}
}
});
b. 渲染组件
三、组件化
1. 概念
局部或全局取件，一个组件可能会被复用多次，此时每个组件都应该有自己独立的变量名称空间。
2. 实现方法
将组件中的数据，作为方法的返回值（方法执行后会产生一个局部作用域）
3. 代码
let localTag = {
template: `
点击了图片{{ count }}下
`,
data() {
return {
count: 0,
}
},
methods: {
fn() {
console.log(this);
this.count++;
}
}
};
四、组件传参：父传子
1. 传参方法
a. 定义要传的对象
let dogs = [
{
name: '二哈1号',
img: 'img/100.jpg',
},
];
b. 子组件会在父组件中渲染，渲染时，将父组件的变量绑定给子组件的自定义属性，将可以将变量值传递给子组件
![]()
捶{{ dog.name }}{{ count}}下
`,
data() {
return {
count: 0,
}
},
methods: {
fn() {
console.log(this.dog);
this.count++;
}
}
};
2. 点击图片示例
父传子