$ 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を使用するよりもコードが少なくなります。通常、 $E M I Tがさを指し、親グループのメンバー、今は結果の$ リスナーに聞いて、あなたは直接$ EMIT法の祖父のコンポーネントを呼び出すことができます。

・

包装の原則

要素のel-inputをカプセル化する場合

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

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

これは達成されました。type= "text" placeholder = 'please enter'が継承され、指定された位置v-bind = "$ attrs"に配置されます。実際の効果を得る：

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

F12を開くと、パッケージに入力があることがわかります。次に、これらの特性をDOMに表示できます。機能は$ attrsに継承されます。（それを見て、スクリーンショットを撮ってください）
ここに画像の説明を挿入
inheritAttrs：false有什么用呢？

記述しない場合、デフォルトはtrueになり、デフォルトはルートノード（子コンポーネントのdivの上）に継承されます。divの特性の用途は何ですか？無駄だ。したがって、指定した場所に継承するには、最初にデフォルトの継承をオフにしてから、v-bindを使用して場所を指定します。指定しない場合、継承しません。誰もが何の関係もありません、あなたは通常$ attrsを使うことができます（世代を超えて値を渡すなど）
ここに画像の説明を挿入