Vue 组件化开发

组件化开发

思想：标准、分治、组合、重用

 

1、组件注册

Vue.component('组件名', {
    data: function() {
        return {
            组件数据
        }
    },                          // 数据要以函数的形式
    template: '组件模板内容',    // 必须是单个根元素
    methods: 组件内部方法
})

其中最大的不同是：数据要写成函数的形式，形成闭包，使每个组件的数据都是独立的；

模板内容如果比较复杂，可以用 ES6语法 - 模板字符串的形式来写（反引号里面加正常标签）；

组件使用： <组件名> </组件名>

 

组件命名可以用 “-” 连接（推荐），也可以用驼峰命名法，两种命名可相互转化；

但如果驼峰式命名组件，那么在使用组件时，只能在字符串模板中使用驼峰式的名字，在普通标签模板（body）中必须转化为短横线的名字。

 

 

局部组件

在 Vue 实例中，引入 component 属性：

// 在外部定义
var 组件A = {
    data: function() {
        return {...}
    },                
    template:... 
};

var 组件B = ...;

var vm = new Vue({
    el: '#v',
    components: {
        '局部组件-A': 组件A,
        '局部组件-B': 组件B,
        ...
    }
})

使用： <局部组件-A/B> </局部组件-A/B>              注意命名、使用时名字的形式。

 

局部组件只能在注册它的父组件中使用，在其他全局组件中不能使用；

自定义指令、过滤器也有类似的局部特性。

 

 

2、调试工具

展现组件的层次关系（父子、兄弟），调试数据

Devtools

 

 

3、组件间数据交互

父组件向子组件传递 —— props

（1）静态方式，父组件以属性的方式传出固定值，子组件内部通过 props 接收；

（2）动态方式，父组件的 data 中写好数据，子组件标签上绑定属性，并且子组件内部通过 props 接收；

静态和动态可以同时使用，传递多个数据。

props 是单向数据流的处理方式。

 

props 属性名规则：

如果 JS 的 props 中，以驼峰形式写属性名；则在 HTML 标签中，要以 -短横线 的形式；

而在字符串模板（template）中，没有限制。

 

props 属性值支持多种类型：字符串、数值、布尔、数组、对象；

绑定属性时，最好属性前面加上冒号，保持数值和布尔的数据类型，不加冒号会变成字符串。

 

子组件向父组件传递 —— 自定义事件

子组件触发自定义事件，同时携带参数，也就是传递的数据；

父组件中，绑定事件来监听，用 $event 接收传递过来的参数。

 

兄弟组件之间传递 —— 事件中心

• 创建一个 Vue 实例对象作为事件中心：

                          var eventHub = new Vue();

• 进行事件监听和事件销毁：

                          eventHub.$on ('事件名', 事件函数);

                          eventHub.$off ('事件名');

• 触发事件，可以携带参数

                          eventHub.$emit ('事件名', 参数..);

 

 

4、组件插槽

用于父组件向子组件传递标签中间的内容，方便内容的修改；

1. 创建一个子组件，其中插槽位置   <slot></slot> ；
2. 在 html 父组件中使用子组件，子组件标签中间的内容就会传递到插槽中。

 

具名插槽

为了区分不同的插槽，可以给插槽命名：   <slot  name='插槽名' ></slot>  ；

使用时则在标签中加上     <p  slot="插槽名"></p> ；

没有匹配到的内容就分配到未命名的插槽中。

 

作用域插槽

父组件对子组件的内容进行加工处理

 

 

11.30