随手笔记24-组件通信、组件进阶

一、组件通信

1.父子组件

自定义属性和props来实现父子组件之间的数据通信

第一步：创建两个组件，并建立父子关系

第二步：在父组件上，使用子组件时，通过自定义属性来传递数据

/src/component/parent.vue

<子组件名 :自定义属性名="要传递的数据"></子组件名>

第三步：在子组件中，需要用props来接收父组件传递的数据

/src/components/child.vue

<script>
export default {
	props:['自定义属性名']
}
</script>

子组件中接收了数据后，就会在自身的实例中用于传递过来的数据，就可以在子组件中进行使用。

2.子父组件

自定义事件，$emit

第一步：在父组件使用子组件时，除了可以传递自定义属性外，还可以传递一个自定义函数

/src/components/parent.vue

<子组件名 :自定义属性名="要传递的数据" @自定义事件名="函数名"></子组件名>

第二步：在子组件中，要主动的触发父组件传递的函数

/src/components/child.vue

methods:{
    子组件的函数(){
        this.$emit('父组件传递自定义事件名',要传递给父组件的数据)
    }
}

$emit 用来触发父组件传递的事件。

第三步：在父组件中，接收子组件传递的数据

3.非父子组件（兄弟组件、跨级组件）

eventbus

公用的容器

/src/main.js

Vue.prototype.bus = new Vue();
new Vue({})

数据发送

在数据发送的组件中，通过公用容器调用$emit方法来触发一个事件并发送数据

this.bus.$emit('事件名','要发送的数据')

数据接收

在数据接收的组件中，通过公用容器调用$on方法来监听一个事件，只要数据发送端触发了对应的事件，那么就可以在数据接收的组件中接收到对应的数据。

mounted(){
    this.bus.$on('事件名',(形参)=>{
    	...
    })
}

二、组件进阶

1.is属性

(1)改变html默认标签约束

<table>
	<h2 is="p"></h2>
</table>

(2)实现动态组件

利用属性绑定可以实现不同组件的展示

<标签名 :is="变量名"></标签名>

2.ref

(1)普通标签

如果要实现的效果用vue不知道怎么去做，但是知道原生js的做法，可以给普通的html标签添加一个ref属性，这样在组件挂载完成后就可以获取到这个标签的DOM。

<template>
	<h2 ref="myh2"></h2>
</template>
<script>
	mounted(){
		this.$refs.myh2.innerHTML = 'hello ref'
	}
</script>

(2)vue组件

ref属性可以使用到子组件上，通过ref属性，可以在父组件中获取到子组件的这个vue实例，然后就可以实现组件通信的效果。

<子组件 ref="自定义名称" ></子组件>

<script>
	mounted(){
		this.$refs.自定义名称.子组件的初始数据变量名 = '新的值'
	}
</script>

注意：ref需要在组件挂载完成后才能够使用

(3)数组

在遍历循环的标签或者组件上，设置了ref属性后，对应的数据是一个数组，数组中的每一个元素都是一个DOM结构。

<div class="box" ref="boxitems" v-for="item in 5" :key="item">{{ item }}</div>

此时boxitems就是一个数组

3.jquery

(1)安装

npm i jquery --save

(2)使用

安装好jquery后，可以在需要使用jquery的页面组件中引入jquery来使用

<template>
	<div class="box"></div>
	<button @click="toggle">收起</button>
</template>
<script>
	import $ from 'jquery'
	methods:{
		toggle(){
			$(".box").slideUp(500)
		}
	}
</script>

(3)全局使用jquery

如果项目中有多个页面要使用jquery，每一个页面都去引入jquery就会很麻烦，可以将jquery挂载到vue实例的原型链上

/src/main.js

import $ from 'jquery'
Vue.prototype.$ = $

这样，当前项目中任意组件都可以使用this.$来进行jquery的一些操作了。

4.插槽

slot

如果需要在父组件使用子组件时，告知子组件要展示的不同内容（不使用组件通信），可以在子组件中设置一个插槽，用来接收、展示父组件告知的内容。

(1)匿名插槽

第一步：在子组件中添加slot标签

<slot></slot>
子组件内容...

第二步：在父组件使用子组件时，在子组件的内部分发内容

<子组件名>
	要分发的内容1
</子组件名>

(2)具名插槽

在设置插槽时，可以给插槽设置不同的name属性，来区分不同的插槽。

<slot name="插槽1"></slot>
组件内容。。。。
<slot name="插槽2"></slot>

在使用插槽时，通过slot属性来区分不同的插槽

<子组件名>
	<标签名 slot="插槽1"></标签名>
	<标签名 slot="插槽2"></标签名>
</子组件名>