组件化
1、定义全局组件
1、要在父实例中使用某个组件，组件必须在实例值之前定义
2、组件其实也是一个Vue实例，因此它在定义时也会接收：data、methond、生命周期函数等
3、不同的组件不会与页面的元素绑定，否则就无法复用了因此也没有el属性
4、组件渲染需要html模板，所以增加了template属性，值就是HTML模板，模板的内容必须由html双标记包裹
5、全局组件定义完毕，任何vue实例都可以直接在html中通过组件名称来使用组件了
6、data定义方式比较特殊，必须是一个函数
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>全局组件</title>
6 </head>
7 <body>
8 <div id="app">
9 <!--使用定义好的全局组件-->
10 <counter></counter>
11 <counter></counter>
12 </div>
13 </body>
14
15 <script src="./node_modules/vue/dist/vue.js"></script>
16 <script>
17 // 定义全局组件，两个参数：1、组件名词 2、组件参数
18 Vue.component("counter",{
19 template:`<button v-on:click="count++">你点了我{{count}}下</button>`,
20 data(){
21 return{
22 count:0
23 }
24 }
25 });
26 var app = new Vue({
27 el:"#app"
28 });
29 </script>
30 </html>
2、组件的复用
定义好的组件可以任意复用多次
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
3.局部注册
一旦全局注册，就意味着即便你以后不再使用这个组件，它依然会随着Vue的加载而加载，因此，对于
一些并不频繁使用的的组件，我们采用局部注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部组件</title>
</head>
<body>
<div id="app">
<increase></increase>
<br>
<increase></increase>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const increase = {
template:`<button v-on:click="count++">点我加{{count}}</button>`,
data(){
return{
count:0
}
}
};
var app = new Vue({
el:"#app",
components:{
increase: increase //将定义的对象注册为组件
/*
* components就是当前vue对象子组件集合
其中key就是子组件名称
其值就是组件对象的属性
* */
}
});
</script>
</body>
</html>
4、组件的通信
4.1 父向子简单通信
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>父向子通信</title>
6 </head>
7 <body>
8 <div id="app">
9 <h1>大家好，给大家介绍一下</h1>
10 <!--使用子组件，同时传递title属性-->
11 <sun title="我来自火星"></sun>
12 </div>
13 <script src="./node_modules/vue/dist/vue.js"></script>
14 <script>
15 Vue.component("sun",{
16 //直接使用props接收到的属性来渲染页面
17 template:`<h1>{{title}}</h1>`,
18 props:['title'] //通过props来接收一个父组件传递的属性
19 });
20
21 var app = new Vue({
22 el:"#app"
23 });
24 </script>
25 </body>
26 </html>
4.2 父向子复杂通信
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>父向子复杂的通信</title>
6 </head>
7 <body>
8 <div id="app">
9 <h2>我喜欢这些语言：</h2>
10 <!--使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件自己的属性，language-->
11 <my-list :items="language"/>
12 </div>
13 <script src="./node_modules/vue/dist/vue.js"></script>
14 <script>
15 //定义一个子组件
16 let myList = {
17 template:`<ul>
18 <li v-for="item in items" :key="item.id">{{item.id}}:{{item.name}}</li>
19 </ul>`,
20 props:{
21 items:{
22 type:Array, //限定父组件传递来的必须是数组，否则报错
23 default:[] //默认值
24 }
25 }
26 };
27 var app = new Vue({
28 el:"#app",
29 components:{
30 myList //当key和value一样时，可以只写一个
31 },
32 data:{
33 language:[
34 {id:1,name:'Java'},
35 {id:2,name:'JavaScript'},
36 {id:3,name:'C语言'},
37 {id:4,name:"Python"}
38 ]
39 }
40 });
41 </script>
42 </body>
43 </html>
4.3 子向父通信
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>子向父通信</title>
6 </head>
7 <body>
8 <div id="app">
9 <h2>num: {{num}}</h2>
10 <!--使用子组件的时候，传递num到子组件中-->
11 <!--通过v-on指令将父组件的函数绑定到子组件上-->
12 <counter :num="num" @inc="increase" @dec="decrease"></counter>
13 </div>
14 <script src="./node_modules/vue/dist/vue.js"></script>
15 <script>
16 Vue.component("counter",{
17 //定义组件，定义两个按钮，点击数字num或加或减
18 template:`<div>
19 <button @click="plus">+</button>
20 <button @click="reduce">-</button>
21 </div>`,
22 //当子组件中的按钮被点击时，调用绑定的函数
23 methods:{
24 plus(){
25 this.$emit("inc"); //vue提供的内置的this.$emit函数，用来调用父组件绑定的函数
26 },
27 reduce(){
28 this.$emit("dec");
29 }
30 }
31 });
32 var app = new Vue({
33 el:"#app",
34 data:{
35 num:0
36 },
37 methods:{//父组件定义操作num的方法
38 increase(){
39 this.num ++;
40 },
41 decrease(){
42 this.num --;
43 }
44 }
45 });
46 </script>
47 </body>
48 </html>