vue父子组件通过$attrs, $listeners传值

listeners 属性像两个收纳箱，listeners负责收纳事件

<!--father.vue-->
<template>
  <div>
    $attrs & $listerens
    <child :content="content" :bar="bar" @one="one" @two="two" class="child" style="color: red;"></child>
  </div>
</template>

<script>
import child from "./child.vue"
export default {
  components:{
    child
  },

  data() {
    return{
      content: "content值",
      bar: "bar值",
    }
  },

  mounted() {
    console.log("父组件mounted")
    console.log("this.$attrs", this.$attrs)
    console.log("this.$listeners", this.$listeners)
  },

  methods:{
    one() {

    },
    two() {

    },
  }
}
</script>

<style scoped>
  .child{
    font-size: 33px;
  }
</style>

<!--child.vue-->
<template>
  <div>child组件</div>
</template>

<script>
export default {
  props: {
    content:{
      type:String,
      default:""
    },
    // one: Function
    one:{
      type:Function,
      default:() => {
        return function() {

        }
      }
    },
  },

  mounted() {
    console.log("子组件mounted")
    console.log("this.$attrs", this.$attrs)
    console.log("this.$listeners", this.$listeners)
  }
}
</script>

以上代码输出:

子组件mounted
this.$attrs {bar: "bar值"}
this.$listeners {one: ƒ, two: ƒ}
父组件mounted
this.$attrs {}
this.$listeners {}