组件
组件系统是Vue的一个重要概念,因为它是一种抽象,允许我们使用小型,独立和通常可复用的组件构建大型应用。
1、全局组件
// 注册一个全局组件MyHeader
Vue.component('MyHeader',{
template:`<h1>标题内容</h1>`
})
// 调用组件
<div id="app">
<myheader></myheader> //采用小写的注册组件
//若是驼峰命名 例如 MyHeader 则写的是<my-header></my-header>
</div>
2、局部组件
//局部定义组件
var ComponentA = {...}
var ComponentB = {...}
// 调用定义的局部组件
new Vue({
el: "#app",
components:{
'component-a':ComponentA,
'component-b': ComponentB
}
})
3、组件编写方式与Vue实例的区别
- 自定义组件需要有一个root element *
- 父子组件的data是无法共享
- 组件可以有data,methods,computed…,但是data 必须是一个函数
4、组件通信
父传子
使用props
属性进行传递
//父组件 传递数组listData和nhdm
<MyComponent :listData="listData" :nhdm="nhdm"></MyComponent>
// 子组件
props:["listData", "nhdm"] // 不需操作最简单的接受值
or
props:[
listData:{
type: Array, // 数据类型
default: '这是listData设置的默认值'
},
nhdm:{
type: String,
default: '1123'
}
]
子传父
子级向父级传递数据 使用事件传递。在父组件中使用到子组件的标签时,绑定一个自定义事件,在子组件中,需要传递数据时,触发对应事件的执行并携带传递的数据即可。
//需要在子组件身上监听事件,等子组件通过this.$emit 触发事件。
//子组件
<Child @click="handleEvent"></Child>
// 子组件的点击事件
handleEvent(){
this.$emit("childData","我是子传父的数据childData")
}
//父组件
<PopComponent @childData="getChildData($event)"></PopComponent>
// 用$event接受子组件传的数据
getChildData(data){// 获取子组件传的数据
this.nnData = data
}
跨组件跨层级之间的传值
借助Vue实例中的方法 $on() 与 $emit() 来实现数据传递。 $on 用于注册事件监听(绑定事件), $emit 用于触发事件
用法:
- 创建全局的空 Vue 实例:new Vue()
- 在需要接受数据的组件中
created(){}
,利用 $on() 绑定自定义事件,关联事件处理程序员(通常事件处理程序中会接受数据实现业务功能) - 在需要传递数据的组件中,利用$emit()触发自定义事件,在触发执行事件时,传递数据即可
var bus = new Vue() //空的vue实例
// bus.$on bus.$emit
Vue.component("child1",{
template:`
<div>child1<button @click="handleClick()">详细信息</button></div>
`,
methods:{
handleClick(){
bus.$emit("dataaaaa",",,,,,")
}
}
})
Vue.component("child2",{
template:`
<div>child2-订阅者</div>
`,
mounted() {
console.log("mounted-生命周期-dom创建完之后就会触发")
bus.$on("dataaaaa",(data)=>{
console.log("订阅者child2----",data)
})
}
})
5、动态组件
<component>
元素,动态地绑定多个组件到它的 is 属性<keep-alive>
保留状态,避免重新渲染