Vue中的组件

　　在应用程序的开发中，组件是不可缺少的。在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>
        <my-html7 inline-template>
            <div>{{title}}</div>                
        </my-html7>
    </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-html7',{
            data(){
                return {title:'组件7' }
            }
        });
        //注册组件的另外方式是直接写内容
        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的组件有7种写法之多，实际的编码过程中可以根据个人喜好选择。

　　二、组件的嵌套

<!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>

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

props:{
        age:Number,//表示年龄是数字
        name:[String,Number],//表示姓名可以是字符串或者数字
        mydate：{
                    Date,
                    default:'2000-1-1'
                },
        arrlist:{
                    type:Array,
                    default:[],
                    required:true    //表示必须输入
        },
        myobj
       }

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

<!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>

　　显示结果：

　　父组件中的信息变化与子组件中的信息同步，这是因为prop起到了绑定对象的作用，子组件中的信息变化在点击按钮【发送信息给父组件】后因为对象绑定了，在自定义的事件custom-event中调用了父组件的方法handleEvent(obj)，所以也是实时变化同步。

　　组件之间的通讯也可以借助父对象来进行，这样父对象起到桥梁的作用，不过这样的方法不值得推荐，特殊的情况下可以使用。

<!DOCTYPE html>
<html>
<head>
  <title>Vue组件间通信示例-人员列表</title>
  <script src="vue.js"></script>
</head>
<body>
    <div id="app">
      <add-person :mypersons="parentpersonlist"></add-person>
      <person-list :mypersons="parentpersonlist"></person-list>
    </div>
  <!-- 组件 AddPerson -->
  <template id="add-person">
      <div><label>姓名：</label><input v-model="name" type="text"><button @click="addPerson">增加人员</button></div>
  </template>
  <template id="person-list">
      <div><ul><li v-for="person in persons">{{ person }}</li></ul></div>
  </template>
  <script>
    //组件:AddPerson
    Vue.component('add-person', {
      data(){
        return {  childpersons:this.mypersons,name:''  }
      },
      template: '#add-person',
      methods: {
        addPerson() {
          this.childpersons.push(this.name);
          this.$emit('update:parentpersonlist');
        }
      },
      props: ['mypersons']
    });
    //组件:PersonList
    Vue.component('person-list', {
      data(){ return { persons:[] } },
      template: '#person-list',
      props: ['mypersons'],
      created() { this.persons=this.mypersons;  }
    });
    new Vue({
      el: '#app',
      data:{  parentpersonlist:['张1', '李2', '王3']  }
    });
  </script>
</body>
</html>

　　结果显示：