组件:
html、CSS、js的集合体,为该集合体命名,用该名字复用html、CSS、js组成的集合体
(复用性)
1.组件分类:
- 根组件:new Vue({ }) 生成的组件,顶级组件
- 局部组件:组件名={} ,{}内部采用的是vue语法
- 全局组件:vue.component('组件名',{}),{}内部采用的是vue语法
2.组件的特点:
- 组件都有管理组件html页面结果的template实例成员,template中有且只有一个根标签
根组件都是作为最顶层父组件,局部与全局组件作为子组件,也可以成为其他局部与全局组件的父组件
- 挂载点不是虚拟DOM,是要被虚拟DOM组件替换的占位符对象
- 局部组件必须注册后才能使用,全局组件不需要注册,提倡使用局部组件
- 子组件的数据需要隔离(数据组件化,每一个组件拥有自己数据的独立名称空间)
- 组件中出现的所有变量(模板中、逻辑中),由该组件自己提供管理
局部全局和根组件都是一个vue实例,一个实例对应一套html、CSS、js结构,所以实例就是组件(this)
总结:根组件,可以不明确template,template默认采用挂载点页面结构,如果设置了template,挂载点内部内容无效,因为会被替换。
html不识别大小写,html、body标签不能被替换,所以不能作为挂载点
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app', // 被组件 template 模块进行替换的占位符
data: {
msg: '组件信息'
},
template: '<p>{{ msg }}</p>'
})
</script>
子组件
声明局部组件:局部组件要在其父组件中注册才能使用
- 声明组件
- 注册组件
- 渲染组件(全局组件不需要注册)
<head>
<meta charset="UTF-8">
<title>子组件</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//局部组件
let localTag = {
template: `
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>美女</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
};
//全局组件
Vue.component('global-tag', {
template: `
<div class="box" @click="fn">
<img src="img/002.jpg" alt="">
<h2>大长腿</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
});
//根组件
new Vue({
el: '#app',
data: {},
components: { // 注册组件
localTag,
}
})
</script>
组件的数据局部化
<head>
<meta charset="UTF-8">
<title>组件化</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let localTag = {
template: `
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>捶了美女{{ count }}下</h2>
</div>
`,
data() { // 局部或全局取件,一个组件可能会被复用多次,每个组件都应该有自己独立的变量名称空间
return {
count: 0,
}
}, // 数据需要组件化,作为方法的返回值(方法执行后会产生一个局部作用域)
methods: {
fn() {
console.log(this); //每个this有自己的局部名称空间,实现了各变量的组件化
this.count++;
}
}
};
new Vue({
el: '#app',
data: {},
components: {
localTag,
}
});
`
class A:
name = 'Owen'
def __init__(self, name):
self.name = name
a1 = A('1')
a2 = A('2')
a1.name
a2.name
`;
</script>
组件传参-父传子
- 子组件可以通过props自定义组件属性(采用反射机制,需要填写字符串,但是使用时可以直接作为变量)
- 子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,可以将变量值传递给子组件
<title>父传子</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
width: 200px;
height: 240px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<local-tag v-for="dog in dogs" :dog="dog" def="12345" :xyz="dog.name"></local-tag>
<!--给属性赋值-->
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let dogs = [
{
name: '二哈1号',
img: 'img/100.jpg',
},
{
name: '二哈2号',
img: 'img/200.jpg',
},
{
name: '二哈3号',
img: 'img/300.jpg',
},
{
name: '二哈4号',
img: 'img/400.jpg',
},
{
name: '二哈1号',
img: 'img/100.jpg',
},
{
name: '二哈2号',
img: 'img/200.jpg',
},
{
name: '二哈3号',
img: 'img/300.jpg',
},
{
name: '二哈4号',
img: 'img/400.jpg',
}
];
let localTag = {
props: ['dog', 'def', 'xyz'], //自定义属性
template: `
<div class="box" @click="fn">
<img :src="dog.img" alt="">
<!--//属性名前面加冒号,表示绑定,后面可以加变量-->
<h2>捶{{ dog.name }}{{ count}}下</h2>
<!--<h3>{{ abc }}</h3>-->
<!--<h3>{{ def }}</h3>-->
<!--<h3>{{ xyz }}</h3>-->
</div>
`,
data() {
return {
count: 0,
}
},
methods: {
fn() {
console.log(this.dog);
this.count++;
}
}
};
new Vue({
el: '#app',
data: {
dogs,
},
components: {
localTag,
}
});
</script>
- 自定义组件标签的事件
- 自定义事件是属于子组件的,子组件在父组件中渲染并绑定事件方法,所以事件方法由父组件来实现
- 子组件如何触发自定义事件:this.$emit('自定义事件名',触发事件回调的参数们)
- 子组件触发自定义事件,携带出子组件的内容,在父组件中实现自定义事件的方法,拿到子组件传递给父组件的消息
- 子集来触发,父集来实现,父集可以拿到子集内部的数据,因为子集内部的数据不能被修改,自定义的事件不能自动触发,只能手动触发。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子传父</title>
</head>
<body>
<div id="app">
<h1>{{ h1 }}</h1>
<h3>{{ h3 }}</h3>
-->
<tag @action="actionFn"></tag>
<hr>
<tag2 @h1a="aFn1" @h3a="aFn3"></tag2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let tag = {
template: `
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changeTitle">修改标题</button>
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
changeTitle() {
if (this.t1 && this.t2) {
// console.log(this.t1, this.t2);
this.$emit('action', this.t1, this.t2);
this.t1 = '';
this.t2 = '';
}
}
}
};
let tag2 = {
template: `
<div>
主标题内容:<input type="text" v-model="t1" @input="t1Fn">
子标题内容:<input type="text" v-model="t2">
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
t1Fn() {
this.$emit('h1a', this.t1);
}
},
watch: {
t2 () {
this.$emit('h3a', this.t2);
}
}
};
new Vue({
el: '#app',
data: {
h1: '主标题',
h3: '子标题'
},
components: {
tag,
tag2,
},
methods: {
actionFn(a, b, c) {
// console.log('触发了', a, b, c);
this.h1 = a;
this.h3 = b;
},
aFn1(a) {
if (!a) {
this.h1 = '主标题';
return;
}
this.h1 = a;
},
aFn3(a) {
if (!a) {
this.h3 = '子标题';
return;
}
this.h3 = a;
},
}
})
</script>
</html>