vue父子组件通信

vue 父子组件通信

1.1 父传子 props（组件通信）

1.2 父子组件通信-props驼峰标识

父子组件通信 props 如果用到驼峰标识会遇到问题（v-bind目前版本不支持驼峰，必须进行转化使用），一般建议props不使用驼峰传值，如果非要使用驼峰命名传值，需要注意格式;
例如：

1.3 子传父 组件通信

this.$emit('cpnclick',item)

子组件：（尽量不要使用驼峰，html使用驼峰可能父组件接收不到）

父组件：

1.4 父访问子 children -refs

2.1 插槽 slot

如何封装这类插件？ slot

1.插植的基本使用 <slot></slot>
2.插槽的默认值<slot>button</slot>
3.如果有多个值,同时放入到组件进行替换时，一起作为替换元素

2.2 具名插槽

slot 已经被官方废弃且不会出现在 Vue 3 中 ，由v-slot代替

v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的
API替代方案。v-slot完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope
attribute仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。

2.3 作用域插槽的使用

自 2.6.0 起有所更新。已废弃的使用 slot-scope attribute 的语法在这里

代码示例：
子组件：

	<!-- data可以是languages  :languages="zLanguages" -->
		<slot :data="zLanguages">
			<div v-for="o in zLanguages" :key="o" class="text item">
				{{o}}
			</div>
		</slot>

父页面：
现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字

			<zslot>
				<template v-slot="slotProps">
					<div v-for="o in slotProps.data" :key="o">
						{{o}}-
					</div>
				</template>
			</zslot>