Vue中的组件

　　在应用程序的开发中，组件是不可缺少的。在Vue的使用中，同样也会用到组件。
　　1、组件的名字唯一；
　　2、组件以Html形式书写；
　　3、组件可以复用；
　　4、组件可以嵌套；
　　5、组件可以相互调用；
　　6、组件分为可视化组件和非可视化组件。
　　一般情况下，组件写在一个单独的文件中，在使用的时候按需引入和使用。

　　一、组件的定义和使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue组件的定义与使用</title><script src="vue.js"></script>    
</head>
<body><div id="demo1" style="background-color: aquamarine;"><p>这是demo1组件</p><my-html1></my-html1><my-html2></my-html2><my-html3></my-html3><my-html5></my-html5></div><div id="demo2" style="background-color: darksalmon;"><p>这是demo2组件</p><my-html1></my-html1><my-html2></my-html2><my-html4></my-html4><my-html6></my-html6></div><template id="component5"><div><p>组件5</p></div></template>    <script type="text/x-template" id="component6"><div><p>{{ mytitle }}</p></div></script><script>var mycompponet5={template:"#component5"}//创建组件模板对象const mytemplate=Vue.extend ({template:`<div><p>标签组件1</p></div>`});//注册全局组件Vue.component('my-html1',mytemplate);Vue.component('my-html5',mycompponet5);Vue.component('my-html6',{template:'#component6',data(){{ return {mytitle:"组件6"}    }}});//注册组件的另外方式是直接写内容Vue.component('my-html2',{data(){ return {count:1}    },            template:`<button v-on:click="count++">按钮组件2，点击数：{{count}}</button>`});const myhtml3={data(){ return { count:0}   },template:`<button v-on:click="count++">按钮组件3，点击数：{{count}}</button>`}//创建vue对象const vueApp1=new Vue({el:'#demo1',components:{'my-html3':myhtml3}});const vueApp2=new Vue({el:'#demo2',components:{'my-html4':{data(){ return { count:0}   },template:`<button v-on:click="count++">按钮组件4，点击数：{{count}}</button>`                    }}});        </script>
</body>
</html>

　　显示结果：

　　从上面的代码中可以看出，vue的组件有多种写法，可以根据个人喜好选择。

　　二、组件的嵌套

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue组件的嵌套</title><script src="vue.js"></script>    
</head>
<body><div id="demo" style="background-color: aquamarine;"><my-html1></my-html1><my-html2></my-html2></div><script>//创建组件模板对象const AloneTemplate={template:`<div><p>独立的组件1</p></div>`};Vue.component('my-html1',{data(){ return {count:1}    },            template:`<div><button>按钮组件</button><childcomponet></childcomponet></div>`,components:{'childcomponet':AloneTemplate}});Vue.component('my-html2',{data(){ return {count:1}    },            template:`<div><button>按钮组件</button><childcomponet></childcomponet></div>`,components:{'childcomponet':{template:`<div><p>独立的组件2{{count}}</p></div>`                    }}});//创建vue对象const vueApp1=new Vue({el:'#demo'});</script>
</body>
</html>

　　上面是组件嵌套的两种写法。

　　三、组件的传值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue的通信</title><script src="vue.js"></script>    
</head>
<body><div id="demo" style="background-color: aquamarine;"><html-a v-bind:incomepara1="worker" v-bind:incomepara2="program"></html-a></div><script>const AloneTemplate={data(){ return { name:'人员列表' } },template:`<div><p>{{name}}</p><p>人员1：{{ incomepara1.name +"--"+incomepara1.age}}</p><p>人员2：{{incomepara2.name}}--{{incomepara2.age}}</p></div>`,props:['incomepara1','incomepara2']};const vueApp=new Vue({el:'#demo',data:{worker:{    name:"json",age:37    },program:{   name:"sdf",age:31   }},components:{'html-a':AloneTemplate}});</script>
</body>
</html>

　　props是一个数组，它起到桥梁的作用，可以传递多个参数，具体的参数可以是数组、变量名，也可是对象，传递对象就可以传递丰富的参数值。
　　props可以理解为代理，对于组件而言，通过v-bind让props的参数指向父项的具体参数，对于组件内部就可以直接使用了。
　　v-bind的绑定时括号里面可以是运算表达式。

　　下面是一个子组件与父组件相互通信的例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Component Communication</title><script src="vue.js"></script>
</head>
<body><script type="text/x-template" id="mycomponent"><div style="background-color: aquamarine;width: 500px;"><h2>这是子组件</h2>姓名：<input type="text" v-model="myPerson.name"/>年龄：<input type="number" v-model="myPerson.age"/><h3>这是来自父组件的信息：我是{{ proxyperson.name }}，今年{{proxyperson.age}}岁。</h3><button @click="emitEvent">发送信息给父组件</button></div></script><div id="app" style="background-color: rgb(140, 91, 201);width: 600px;"><h2>这是父组件</h2>姓名：<input type="text" v-model="dawn.name"/>年龄：<input type="number" v-model="dawn.age"/><h3>这是来自子组件的信息：我是{{ childperson.name }}，今年{{childperson.age}}岁。</h3><mycomponent :proxyPerson="dawn" @custom-event="handleEvent"></mycomponent> </br></div><script>Vue.component('mycomponent', {data(){return {  myPerson:{  name:'John',age:23  }}},template: '#mycomponent',props: ['proxyperson'],methods: {emitEvent() { this.$emit('custom-event', this.myPerson);  }}});new Vue({el: '#app',data: {dawn:{  name:'SDF',age:35 },childperson:{ name:'',age:0 }},methods: {handleEvent(obj) {  this.childperson=obj; }}});</script>
</body>
</html>

　　显示结果：