[JavaScript知识库]04-vue学习-组件

组件

组件系统是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>保留状态，避免重新渲染