$attrs、inheritAttrs、$listeners；VUE隔代传值；组件封装原理

前言

隔代传值一般不用vuex，大项目vuex咋能用来传一些琐碎的值。

孙子获得爷爷的数据，用$attrs就行

爷爷获取孙子的数据，用$listeners

组件封装原理就是隔代传值，本来隔代传值不想写的，最近看到封装原理才觉得有点东西，会多用到一个inheritAttrs属性。它解决这么个场景：你想封装一个密码类型或明文类型的输入组件，要用到type="password"或者type=’'text"吧。 那就需要把type=“xxx” 继承过去指定位置。（举的例简单，当然还有其他实现方式）怎么去继承的问题。

先来隔代传值

假如想把tab=2传给孙子

父组件
<template
	<A tab=2 placeholder=“请输入” :list="list"     //这个list是props传值，不影响$attrs

子组件
<template
	<B v-bind="$attrs   //这句省不了，承上启下作用~
	
孙子组件
<template
	<p >{
    
    {
    
    $attrs.tab}}

就这，可能你们会说和pops有啥区别，没啥区别，其实就少写了几行。
$attrs获取的是除prop外的特性，这里tab、placeholder被识别成特性了
打印这个$attrs： {‘tab’：2，placeholder：“请输入”}

有没想起element的el-input封装，关于type='text' /'password'

孙子想把wish='11k’传给爷爷

父组件
<template
	<A v-on:getBdata="getBdata"  
	
	getBdata（val） {
    
     console.log('拿到了') }

子组件
<template
	<B v-on="$listeners"    //这句省不了，承上启下作用~
	
孙子组件
	this.$emit('$getBdata',{
    
    wish:'11k'})

也是比只用prop少了点代码，正常情况下$emit是指父组件，现在因为$listeners监听了，你可以用$emit直接调用爷爷组件的方法。

·

封装原理

假如你想封装element的el-input

父组件
<template
	<el-input type="text" placeholder='请输入'>
	

子组件
<template
	<div
		<input v-bind="$attrs">     //美化一下就是封装了啦，
	
<script>
	export default {
    
    
		inheritAttrs：false
	}

这就已经实现， type=“text” placeholder='请输入’会被继承下来，放到指定位置 v-bind="$attrs"这里。得到实际效果：

扫描二维码关注公众号，回复： 12977864 查看本文章

<input type="text" placeholder='请输入'>

打开F12可以看到，封装它里面就是一个input的，然后这些特性是可以显示在dom上面的。特性被$attrs继承下来了。（随便看看就好，随便截的图）

inheritAttrs：false有什么用呢？

如果不写，默认true，那就默认继承到根节点（子组件的div上面），div要特性有啥用？没用。所以要继承到指定位置，那就先关闭默认继承，然后用v-bind指定位置。如果不指定，那就是不继承咯。大家无事发生过，一样可以正常用$attrs（比如隔代传值）