vue多层传递参数跟方法

// 祖组件<template>
  <div>
    <child1
      :p-child1="child1"
      :p-child2="child2"
      :p-child3="child3"
      v-on:test1="onTest1"
      v-on:test2="onTest2"
    ></child1>
  </div>
</template>
<script>
import Child1 from './Attrs/Child1.vue';  // 引入
export default {
  components: {
    Child1
  },
  data() {
    return {
      child1: 'child1',
      child2: 'child2',
      child3: 'child3'
    }
  },
  methods: {
    onTest1() {
      console.log('test1 running...')
    },
    onTest2() {
      console.log('test2 running');
    }
  }
}
</script>

// 父组件<template>
    <div class="child-1">
        <p> in child1: </p>
        <p>props: {{pChild1}} </p>　　// 步骤3：步骤1 props获取到的值在此处展示
        <p>$attrs: {{$attrs}} </p>  // 步骤4： 除去props展示的其他没有展示的属性
        <hr>
        <child2 v-bind="$attrs" v-on="$listeners"></child2>  // 步骤5：没有展示的属性使用 v-bind="$attrs" 传递属性   v-on="$listeners" 传递方法
    </div>
</template>
<script>
import Child2 from './Child2.vue';
export default {
    components: {
        Child2
    },
    data() {
        return {

        }
    },
    props: ['pChild1'],  // 步骤1：获取需要用到的从祖组件传递过来的属性，
    inheritAttrs: false,  // 步骤2：设置为false，使得传递的属性不在div标签上展示
    mounted() {
        this.$emit('test1');
    }
}
</script>

// 子组件<template>
    <div class="child-2">
        <p>in child2:</p>
        <p>props: {{pChild2}} </p>  // 步骤3：props获取到的属性值用于展示
        <p>$attrs: {{$attrs}} </p>  // 步骤4：传递的没有被props所接收的其他属性
    </div>
</template>
<script>
export default {
    props: ["pChild2"],  // 步骤1: 获取用于展示的传递过来的属性
    data() {
        return {};
    },
    inheritAttrs: false,  // 步骤2：设置为false，使得传递的属性不在标签上展示
    mounted() {
        this.$emit('test2')
    }
}
</script>