面试必问 —— 组件传值（全面）

Posted 2022-11-29 鲸渔要加油

文章目录

• 父传子
• • 一、父传子通过 `props` 接收
  • 二、父传子通过 `$attrs` 接收
  • 三、`$children`
  • 四、`ref`
• 子传父
• • 一、`$listeners`
  • 二、`$parent`
  • 三、自定义事件
• 兄弟传值
• • 一、事件中心
• 祖先传后代
• • 一、`provide` 和 `inject`
• 其他方法
• • 一、`localStorage` 和 `sessionStorage`
  • 二、Vuex

父传子

一、父传子通过 props 接收

父组件在子组件的模板中用动态属性传值
也可以传递一个对象

<children :age="18" v-bind="obj" />

子组件用 props 接收

props: 
    age: 
        // 规定必须为数值型，否则报错
        type: number,
        // 规定不能为空，否则报错
        default: true,
        // 自定义校验规则
        validator(value) 
        	// 里面返回的 true 才代表通过校验
			return [18, 19, 20].include(value)
		
    

二、父传子通过 $attrs 接收

注意： 如果父组件传递了5个值，而子组件只接收了3个
剩下两个则会在子组件的 根节点 上面，这就是 非 prop 的 Attrible

默认情况下，非 Prop 的 attribute 会直接作用于组件的根节点，又叫做 Attribute 继承

<p> $attrs.age   $attrs.name <p>

禁用 Attribute 继承
inheritAttrs: false

<template>
    <div>
        <p>line1</p>
        <p :title="$attrs.title">XXX</p>
    </div>
</template>

<script>
export default 
    inheritAttrs: false,
    name: 'List',
;
</script>

注意： class 和 style 作为 props 的保留属性，不能被 props 接收，也不能通过 inheritAttrs 禁用，就是会作用于组件的根节点

三、$children

可以在父组件里面使用 $childern 拿到子组件的实例对象

四、ref

在父组件的子模板里面绑定 ref="名字" 属性
我们可以在父组件的方法里面通过 this.$refs.名字 拿到子组建的实例

子传父

一、$listeners

通过此属性，在子中可以拿到父亲的方法，从而修改父亲的数据
父亲在子组件模板设置的事件触发的方法，子组件都可以拿到，用调用方法并传参的的方式改变父组件的数据 this.$listeners.fn1(123)

二、$parent

可以在子组件的方法里面使用 this.$parent 拿到父组件的实例对象

三、自定义事件

$emit('事件的名字'， 传递的参数)
可以在子组件里面使用 this.$emit('')

<button @click='$emit("big")'>扩大</button>

父组件使用 v-on 接收，触发父组件的 bbb 函数
此处的 $event 永远代表传参的第二个参数

<ce-shi @big='bbb($event)'></ce-shi>

兄弟传值

一、事件中心

vue3 已经废弃的用法

兄弟之间传递数据需要通过 事件中心
用 let hub = new Vue() 来作为 事件中心

传递数据 ，通过一个事件 触发 hub.$emit(名, 传递的数据)

接收数据 ，在 mounted() 钩子中触发 hub.$on(名, (接收的值)=>做的事) 方法

销毁事件 ，在父组件中通过 hub.$off(名) 方法名销毁之后无法进行传递数据

祖先传后代

一、provide 和 inject

在我们的组件的层级套的很复杂的时候使用

无论层级结构多深，祖先组件都可以作为其后代组件的依赖（数据）提供者，祖先组件通过 provide 提供数据，后代组件通过 inject 接收数据

// 父组件
provide: 
	name: '大鲸鱼'

// 子组件
inject: ['name']

其他方法

一、localStorage 和 sessionStorage

二、Vuex