我的博客

Vue组件

 
  • Mar 31, 2020

组件命名方式

**如果使用驼峰式命名组件,那么在使用组件的时候,只能在字符串模板中使用驼峰的方式使用组件,但是在普通的标签模板中,必须使用短横线的方式使用组件 **

短横线方式
Vue.component('my-component',{})
驼峰方式
Vue.component('MyComponent',{})

局部组件注册

var 局部组件名 = {}
components:{
	'短横线方式':局部组件名
}
使用方式
<短横线方式></短横线方式

局部组件只能在注册它的父组件中使用

组件间数据交互

props属性名规则

  • 在props中使用驼峰的形式,模板中需要使用短横线的形式
  • 字符串形式的模板中没有这个限制

props传递数据原则:单向数据流

子组件通过自定义事件向父组件传递信息
<button v-on:click='$emit("enlarge-text",1)'></button>
父组件监听子组件的事件
<menu-item v-on:enlarge-text='fontSize+=$event'></menu-item>
$event为传入的第二个参数
非父子组件间传值

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

var eventHub = new Vue()

监听事件与销毁事件

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

触发事件

eventHub.$emit('add-todo',id)
组件插槽

作用:父组件向子组件传递内容

//普通插槽
<slot></slot>
//具名插槽
<template slot=""></template>
//作用域插槽
应用场景:父组件对子组件的内容进行加工处理
子组件中插槽定义<sloat v-bind:item='item'></sloat>
父组件插槽内容
<template slot-scope='slotProps'></template>
//v-bind:item='item' slot-scope='对象' 对象.item.
Search