vue $attrs及$listeners 使用

A-B-C 三个组件

1. 引用关系：A引用B，B引用C
   步骤1. 跨组件传值：A传值到B， B使用C组件时，v-bind="$attrs"（固定写法），可以使父组件传入的值，以对象形式传递到C组件，如果C组件props申明了该字段，那么可以在C组件直接使用该字段
   步骤2. 跨组件传入回调函数：A引用B组件，导入方法@handleClick="xxxx", B使用C组件时，v-on="$listeners"（固定写法）,可以在C组件直接this.$emit('handleClick')，调用A组件的方法

实现代码：

A组件：

<template>
	<div id="app">
		<v-Filter
     		 :child1="1111"
     		 :child2="2222"
     		 @hanleClick="onTest1"
   		 />
	</div>
</template>

<script>
import Filter from './components/filter'

export default {
  name: 'App',
  inheritAttrs: false,
  components: {
    'v-Filter': Filter
  },
  methods: {
    onTest1() {
      console.log(11111111);
    },
  }
}
</script>

B组件：

<template>
	<div class="useBox">
		<useC	
     		   v-bind="$attrs"
     		   v-on="$listeners"
		/>
	</div>
</template>

<script>
import useC from "./useC.vue";
export default {
  name: "Filter",
  components: {
    "useC ": useC 
  },
}
</script>

C组件：

<template>
  <div class="filterBox">
	child2: {{child2}}
	attrs: {{$attrs}}
	<div @click="test">点击测试</div>
  </div>
</template>

<script>
export default {
  props: ["child2"],
  methods: {
    clickTest() {
      // 这里可以直接调用A组件的回调函数
      this.$emit('hanleClick')
    },
  }
}
</script>