Vue全家桶之组件化开发

Vue全家桶之组件化开发

一、组件化开发思想

1.现实中的组件化思想体现-模块化手机

2.编程中的组件化思想体现-各种区块

3.组件化规范:Web Components通过创建封装好功能的定制元素解决上述问题。

我们希望尽可能多的重用代码

自定义组件的方式不太容易(html,css,js)

多次使用组件可能导致冲突

二、组件注册

1.全局组件注册语法

Vue.component(组件名称,{

    data: 组件数据，

    template: 组件模块内容

})

注册一个名为button-counter的新组件

Vue.component('button-counter'{

    data: function () {

        return {

            count:0

        }

    },

    template: '点击了{{count}}次

})

2.组件用法

   

3.组件注册注意事项

①data必须是一个函数

分析函数与普通对象的对比

②组件模块内容必须是单个根元素

分析演示实例的效果

③组件模块内容可以是模板字符串

模板字符串需要浏览器提供支持(es6语法)

④组件命名方式

短横线方式

Vue.component('my-component',{/*...*/})

驼峰方式

Vue.component('MyComponent',{/*...*/})//只能在模板字符串中使用，如果想在html中使用需要转换成短横线

4.局部组件注册

var ComponentA = { /*...*/}

var ComponentB = { /*...*/}

new Vue ({

    el: '#app'

    components : {

        'component-a' : ComponentA,

        'component-b' : ComponentB

    }

})

三、Vue调试工具

1.调试工具安装

2.调试工具用法

四、组件间数据交互

1.父组件向子组件传值

①组件内部通过props接收传递过来的值

Vue.component('menu-item',{

    props: ['title'],

    template: '

{{title}}

})

②父组件通过属性将值传递给子组件

③props属性名规则

在props中使用驼峰形式，模板中需要使用短横线的形式

字符串形式的模板中没有这个限制

Vue.component('menu-item',{

      //在js中是驼峰式的

  props : [menuTitle'],

  template: '

{{menuTitle}}

'

})

在html中是短横线方式的

④props属性值类型

字符串String

数值Number

布尔值Boolean

数组Array

对象Object

2.子组件向父组件传值

①子组件通过自定义事件向父组件传值

扩大字体

②父组件监听子组件的事件

③子组件通过自定义事件向父组件传递信息

扩大字体

④父组件监听子组件的事件

3.非父子组件间传值

①单独的事件中心管理组件间的通信

var eventHub = new Vue()

②监听事件与销毁事件

eventHub.$on('add-todo',addTodo)

eventHub.$off('add-todo')

③触发事件

eventHub.$emit('add-todo',id)

五、组件插槽

1.组件插槽的作用

父组件向子组件传递内容

2.组件插槽基本用法

①插槽位置

Vue.component('alert-box',{

    template:

     

          Error!

         

     

})

②插槽内容

Something bad happened.

3.具名插槽用法

①插槽定义

   

       

   

   

     

   

   

     

   

②插槽内容

   

标题内容

   

主要内容

   

底部内容

4.作用域插槽

应用场景:父组件对子组件的内容进行加工处理

①插槽定义

   

•        

              {{item.name}}

         

     

②插槽内容

   

六、基于组件的案例

购物车