今天，给大家介绍一下组件！
A：组件：（component）；
1.什么是组件？
组件是vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码；
组件是自定义元素（对象）；
2.定义组件的两种方法：
方法1：先创建一个组件构造器，然后用组件构造器来创建组件；
方法2：(推荐)使用vue.compontent（）根据组件构造器来创建组件；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
/*---自定义标签名建议小写，包含短横线‘-’---------------*/
/*---组件名不能用HTML元素‘-’---------------*/
<hello> </hello>
<my-world></my-world>
</div>
<script>
//方法1：先创建一个组件构造器，然后用组件构造器来创建组件；
//1.使用Vue.extend()来创建一个组件构造器
var MyComponent=Vue.extend({
template:'<h3>Hello World</h3>'
});
//2.使用Vue.component(标签名，组件构造器)，根据组件构造器来创建组件
Vue.component('hello',MyComponent);
//方法2：直接创建一个组件
Vue.compontent('my-world',{
template:'<h1>你好，世界</h1>'
});
var vm=new Vue({//这里的vm是一个组件，称为根组件Root；
el:'#itany',
data:{
msg:'如懿'
}
});
</script>
</body>
</html>
3.组件的分类：全局组件和局部组件；
1>.全局组件，可以在所有vue实例中使用；
2.>局部组件只能在当前vue实例中使用；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<my-hello></my-hello>
</div>
<script>
//全局组件，可以在所有vue实例中使用；
Vue.component("my-hello",{
template:'<h3>{{name}}</h3>',
data:function(){//在组件中存储数据时，必须以函数的形式，函数返回一个对象；
return{
name:'弘历'
}
}
})
//局部组件，只能在当前vue实例中使用；
new Vue({
el:'#itany',
data:{
name:'弘历'
},
components:{
'my-world':{
template:'<h3>{{age}}</h3>',
data(){
return{
age:'18'
}
}
}
}
})
</script>
</body>
</html>
注：1.组件中可以写多个Vue.component;
2.data在组件中存储数据时，必须以函数的形式，函数返回一个对象；
4.组件间的数据传递：
A.父子组件：在一个组件内部定义另一个组件；
2.>父传子[子组件访问父组件的数据]（用属性传）:
a.在调用子组件时，绑定想要获取的父组件的数据；
b.在子组件的内部，使用props选项声明获取的数据，即接收来自父组件的数据；
总结：父组件通过props向下传递数据给子组件；
注：组件中的数据共有三种形式：data,computed,props;
父传子：通过属性props传，（子组件通过props接收数据）；
props类型：数组（Array），字符串（String），对象（Object）；
3.>子传父“（父组件访问子组件的数据）【用事件传】：”
a.在子组件使用vm.$emit(事件名，数据)触发一个自定义事件，事件名自定义；
b.父组件在使用子组件的地方监听子组件触发的事件，并在父组件定义方法，用来获取数据；
总结:子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件；
B.非父子间传值：（通信）
非父子组件间的通信，可以通过一个空的vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件；
Var Event=new Vue();
Event.$emit(事件名，数据)；
Event.$on(事件名，data=>{});
箭头函数：箭头函数就是没有function关键字，而是一个类似箭头的函数；
var a=()=>{return1;}
相当于：
function a(){return 1;}
网友评论