vue 组件化开发 调试工具

全局组件注册

Vue.component('组件名称'，{

data:funciton(){ 对象数据}    //data必须是一个函数

template: 模板语法})     //组件中的模板内容必须是单个元素   模板语法 可以是模板字符串

 

局部组件注册

var 组件名称={  如全局注册相同   }        //局部组件只能在注册在他的父组件中使用

components:{'组件名称’:组件内容}         //全局组件中不能嵌套局部组件

 

组件的使用

<组件名称></组件名称>    //写在vue容器里面  即实例对象里

 

组件命名

短横线           my-conponent

驼峰方式       MyConponent     //普通标签中必须使用短横线命名规则

 

父组件向子组件传值

props属性名规则

在props中使用驼峰形式，模板中使用短横线的形式 同组件命名规则

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

props属性值类型

字符串

数值    //应使用v-bind进行绑定，否则类型属于字符串类型

布尔值  //应使用v-bind进行绑定，否则类型属于字符串类型

数组

对象

子组件向父组件传值

@emit(自定义事件名称)  用于触发自定义事件

父组件中监听事件为自定义事件名称   自定义事件=处理逻辑

传值

@emit(自定义事件名称，参数)  用于触发自定义事件

父组件中监听事件为自定义事件名称($event)  ///($event) 接收值  在处理逻辑中val接收

 

兄弟组件传值

1.创建 事件中心管理组件

2.监听事件与销毁事件

事件中心管理组件.$on('事件名称, 事件函数});

事件中心管理组件.$off('事件名称 });

3.触发事件

 

组件插槽

子组件中预留插槽位置 并可以赋值默认内容

中间传递的值为插槽的值 不赋值 默认为插槽声明时的值

 

具名插槽用法

当插槽具有具体的名字时模板渲染时 模板标签为插槽名称

调用时选择对应的标签 并添加slot属性，值为对应的插槽名称

如不写slot属性 默认添加到 未命名的插槽中

 

作用域插槽

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