$attrs, inheritAttrs, $listeners; VUE passing values across generations; principle of component packaging

Preface

Vuex is generally not used to pass values ​​across generations. How can vuex be used to pass trivial values ​​in large projects.

Grandson gets grandpa’s data, just use $attrs

Grandpa gets grandson’s data using $listeners

The principle of component encapsulation is to pass values ​​across generations. Originally, I didn't want to write values ​​across generations. I recently saw the principle of encapsulation and found something a little bit more. An inheritAttrs attribute will be used. It solves such a scenario: you want to encapsulate a password type or plaintext type of input component, use type="password" or type="text". Then you need to inherit type="xxx" from the specified location. (The example is simple, of course there are other ways to implement it) How to inherit the problem.

First come to pass the value across generations

If you want to pass tab=2 to grandson

父组件
<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'

Grandson wants to pass wish='11k' to grandpa

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

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

It is also less code than just using prop. Normally, $EmITisrefers\; tothe\; parentgroupmember,is\; nowtheresultof$ listeners listen, you can call the $ EMIT method grandfather components directly.

·

Packaging principle

If you want to encapsulate the el-input of the element

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

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

This has been achieved, type="text" placeholder='please enter' will be inherited and placed in the designated position v-bind="$attrs". Get the actual effect:

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

Open F12 and you can see that there is an input in the package, and then these characteristics can be displayed on the dom. Features are inherited by $attrs. (Just take a look at it, take a screenshot)

inheritAttrs：false有什么用呢？

If you don't write it, the default is true, then the default is inherited to the root node (above the div of the child component). What is the use of the div's characteristics? It's useless. So to inherit to the specified location, first turn off the default inheritance, and then use v-bind to specify the location. If you don't specify it, then you don't inherit it. Everyone has nothing to do, you can use $attrs normally (such as passing values ​​across generations)