Vue中的组件

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

　　一、组件的定义和使用

    
    
    
    
        


    

        
这是demo1组件
        
        
        
        
        
            
{{title}}
                
        
    
    

        
这是demo2组件
        
        
        
        
    
        
    

    

　　显示结果：

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

　　二、组件的嵌套

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

　　三、组件的传值与通信

　　注意：
　　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
       }

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

  
  
  
  


  
  

        
这是父组件
        姓名：
        年龄：
        
这是来自子组件的信息：我是{{ childperson.name }}，今年{{childperson.age}}岁。
         

  
  

　　显示结果：

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

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

　　结果显示：

　　2023年一月份的时候学习vue，写了三篇文章，分别是：
　　1、Vue组件化编程的基础知识要点
　　2、Vue组件化编程的组件通信
　　3、三种简洁易行的方法解决基于Vue.js的组件通信

　　一年过去了，我都快忘记了，以前是断断续续地学，并没有做个项目，看来学习需要实时跟进并且要加以适当的练习。
　　编程就是这样，学会容易，上手也很快，但是不做项目加以巩固，等于没有学！