Vue-组件
组件
组件概念：
html、css与js的集合，为该集合体命名，用该名字复用html、css与js组成的集合体构成复用性。
组件分类：
根组件：new Vue()生成的组件
局部组件：组件名={}，{}内部采用的是部Vue语法
全局组件：Vue.component（‘组件名’，{}），{}内部采用的是Vue语法
组件的特点：
1、组件都有管理组件HTML页面结果的template实例成员，template中有且只有一个根标签；
2、根组件都是作为最顶级层的父组件，局部与全局组件作为子组件，也可以成为其他局部与全局父组件；
3、子组件的数据需要隔离(数据组件化，每一个组件拥有自己的数据独立名称空间)；
4、局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件
下面看一个小例子
<div id="app">
{{msg}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'信息组件 '
},
template:'<p>{{msg}}</p>>'
})
</script>
上面的{{msg}}被下面的template内的p标签替换了
局部组件与全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,h2{
margin: 0;
}
.warp{
width: 800px;
margin: 0 auto;
}
.warp:after{
content: '';
display: block;
clear: both;
}
.box{
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: peachpuff;
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="warp">
<!--渲染组件-->
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//声明局部组件：局部组件要在其父组件中注册才能使用
//1、声明组件，2、注册组件，3、渲染组件，全局组件不需注册
//声明局部组件
let localTag={
template:`
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>焰灵姬</h2>
</div>>
`,
};
//声明全局组件
Vue.component('global-tag',{
template:`
<div class="box">
<img src="img/002.jpg" alt="">
<h2>紫女</h2>
</div>
`,
});
new Vue({
el:'#app',
data:{},
components:{ //注册组件
localTag,
}
})
</script>
</html>
其效果为：
组件传值(父传子)：
父传子：
1、子组件可以通过props自定义组件属性(采用反射机制，需要填写的字符串，但是使用时可以直接作为变量)。
2、子组件会在父组件中渲染，渲染时，将父组件的变量绑定给子组件的自定义属性，将可以将变量值传递给子组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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="warp">
<local-tag v-for="dog in dogs" :dog="dog" def="父传子的对象..." :xyz="dog.name"></local-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let dogs=[
{
name:'二哈一号',
img:'img/100.jpg',
}, {
name:'二哈二号',
img:'img/200.jpg',
}, {
name:'二哈三号',
img:'img/300.jpg',
}, {
name:'二哈四号',
img:'img/400.jpg',
},
];
let localTag={// 1）子组件可以通过props自定义组件属性（采用反射机制，需要填写字符串，但是使用时可以直接作为变量）
// 2）子组件会在父组件中渲染，渲染时，将父组件的变量绑定给子组件的自定义属性，将可以将变量值传递给子组件
props:['dog','def','xyz'],
template:`
<div class="box" @click="fn">
<img :src="dog.img" alt="">
<h2>打了{{dog.name}}{{count}}下</h2>
</div>
`,
data(){
return{
count:0,
}
},
methods:{
fn(){
console.log(this.dog);
this.count++;
}
}
};
new Vue({
el:'#app',
data:{
dogs,
},
components:{
localTag,
}
});
</script>
</html>
组件传值(子传父)
自定义事件是属于子组件的，子组件在父组件中渲染并绑定事件方法，所以事件方法由父组件实现；子组件如何触发自定义事件：this。$emit(‘自定义事件名’，触发事件回调的参数们)。
子组件触发自定义事件，携带出子组件的内容，在父组件中实现自定义事件的方法，拿到组件传递给父组件的消息。
下面看下代码，更好理解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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) {
//这里对父传值会使用一个非常重要的$emit,
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() { //这里是在input的框中绑定oninput来时时监听传值，与watch监听事件有异曲同工之效。
this.$emit('h1a', this.t1);
}
},
watch: { //这里使用的时时监听来时时传值，，watch是监听事件
t2 () {
this.$emit('h3a', this.t2);
}
}
};
new Vue({
el:'#app',
data:{
h1:'主标题',
h3:'子标题',
},
components:{
tag,
tag2
},
methods:{
actionFn(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>
