Vue 组件的使用

概念

组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就调用什么样的组件。

模快化和组件化的区别

• 模快化：是从代码逻辑的角度划分的；方便代码分层开发，保证每个功能模块的职能单一；
• 组件化：是从UI界面的角度分析的；前端组件化，方便UI组件的重用

组件的创建方式：

• 方式1
  1、使用Vue.extend 来创建全局Vue组件
  2、通过template属性，指定组件要展示的html结构
  3、使用Vue.component('组件名',创建出来的组件模板对象)
  4、使用组件，直接把组件名称以HTML标签的形式引入页面
  注意：驼峰式命名法要以‘-’隔开，非驼峰式明明如 mycom1 可以直接引入

省略步骤

 Vue.component('myCom1',Vue.extend({
      template:'
使用Vue.extend创建的组件
'   
}))

再省略下

 Vue.component('myCom1',{
      template:'
使用Vue.extend创建的组件
'   
})

• 方式2
  使用template标签注册组件，然后引入

• 方式三（私有组件）：

组件中的data和methods

data

• 组件可以有自己的data
• 组件的data必须是一个方法 并且要用return返回一个对象
• 组件中的data使用方式和实例中的一模一样

components:{    //定义Vue实例的私有组件
        myCom3:{
            template:'#tem3',
            data ( ) { 
              return { 
                msg:'这是组件自己的私有数据'
              }
            }
        }
    }

methods

组件也有自己的methods 与Vue实例的methods使用方式一致

components:{    //定义Vue实例的私有组件
        myCom3:{
            template:'#tem3',
            data ( ) { 
              return { 
                msg:'这是组件自己的私有数据'
              }
            }，
           methods:{ 
                show(){ this.msg = this.msg + '123'}
           }
        }
    }

组件切换

Vue提供了 component ,来展示对应名称的组件，:is属性，可以用来置顶要展示的组建名称；所以可以通过以下方式完成组件切换

    登陆
    注册
    

 

组件之间的传值

• 父组件向子组件传值

• 父组件向子组件传递方法 并向父组件传参

• 子组件向父组件传值
  其实以上方法基本就实现了向父组件传值，可以稍微改下代码

       
    {{msg}}