Vue组件化小结

组件：

类似于 模块化 概念

一、组件定义

1）局部组件

只能在自己的Vue对象范围内使用。

new Vue({

el:

data:

...

components:{

'组件名':{

template:'html标签' —— 组件使用的模板

},

'组件名2':{

template:'html标签' —— 组件使用的模板

}

}

})

*注意事件：  组件名不能有大写字母 —— vue 2.2.4

2）全局组件

在哪里（Vue认识的范围）都可以使用的组件。

Vue.component('组件名',{

//选项

template:'html标签'

});

二、组件的内部信息（选项）——细化选项：

1、template —— 渲染组件的模板

2、数据 —— 函数形式，函数有返回值，返回json，json里面就是这个组件的数据data(){return {msg:'',a:12,arr:[].....}}

3、方法 methods:{show(){},show2(){}}三、模板提取

1）template 标签

2）script 标签 —— 官方推荐

...

组件间的通信：

1、父子间——子组件使用父组件的数据

2、父子间——父组件使用子组件的数据

3、组件间——A组件和B组件之间的数据交换

一、子组件使用父组件的数据

1、在父组件里，通过自定义属性的方式，把数据传到子组件<子组件 :属性名='父级数据'>2、在子组件里接收1)Vue.compoent('',{props:['属性名']});

2)Vue.componet('',{props:{'属性名':String / Number}//*  如果参数是数字，但是指定的是String,这时会有警告，但不影响程序结果})

3、在子组件里使用：

{{属性名}}

父组件使用子组件的数据

1、子级主动发送数据

this.$emit('事件名',要发送的数据);  ——  可以理解为子级新建了一个事件并且把它公布出去了，父级就可以使用这个事件了

this.$emit('child-say',msg);

2、父级通过事件的方式来取数据

@事件名=“父级方法名”

@child-say="receive"

-------

receive(d){

alert(d);  //这里的d就是子级的数据

组件通信：1、子取父，父取子子取父：父：{

//res ->  a的数据

});

这种方式的缺点： 不同的组件，发出的事件名不能重。

3、单一集中数据管理

定义一个公用的对象，大家用的数据都在这个对象里，任何组件可以直接使用，可以更改——利用了 引用 的特性。

const DATA = {

msg:'明天接着唱',

name:'蔡哲浩',

count:2

};

1.定义组件

全局

局部

2.组件通信

1）父子间

父->子:自定义属性，props

子->父:this.$emit('say',msg) , @say="show"

2）单一事件管理

let ev = new Vue();

发：ev.$emit('say',msg);

收：ev.$on('say',r=>{

r

});

3）单一集中数据管理

const DATA = {

msg1:..

msg2:..

}