[JavaScript知识库]vue $listeners $attrs使用场景

关系图：

$atrrs:包含父作用域中不作为props被试别（且获取）的特性绑定（class、style除外），当一个组件没有声明任何props时，这里会包含所有父作用域的绑定（class、style除外），且通过v?bind="$atrrs"传入父组件【父传孙专用,对于值】

$listeners:包含作用域中（不含.native修饰器的）v?on事件监听，可以通过v?on="$listeners"传入内部组件【孙传父专用，对于事件】

A:父组件

<template>
    <div id="father">
        father {{tempdata1}}-{{tempdata2}}
        <button @click="fu">fu</button>
        <child :temp1="tempdata1" :temp2="tempdata2" @tempFn="fahterFn" :propsValue="propsValue"></child>
    </div>
</template>

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

  data() {
      return {
          tempdata1: 'father1',
          tempdata2: 'father2',
          propsValue: '$attrs不会传递child组件中定义的props值'
      }
  },

  created() {},
  mounted() {},

  computed: {},

  watch: {},

  methods: {
      fahterFn(val1,val2) {
          this.tempdata1 = val1;
          this.tempdata2 = val2;
          console.log('father function!',val1);
      },
      fu() {
          this.tempdata1 = 'xixixi'
      }
  },
};
</script>

<style scoped lang="scss">
</style>

B:子组件

<template>
    <div id="child">
        <div>
            child: {{$attrs}}-{{propsValue}}
        </div>
        <son v-bind="$attrs" v-on="$listeners"></son>
    </div>
</template>

<script>
import son from './son.vue';
export default {
  components: { son },
  props: ['propsValue'],

  data() {
      return {

      }
  },

  created() {},
  mounted() {},

  computed: {},

  watch: {},

  methods: {
  },
};
</script>

<style scoped lang="scss">
</style>

C：孙组件

<template>
    <div id="son">
        son {{$attrs}}
        <button @click="ab">dd</button>
    </div>
</template>

<script>
export default {
  components: {},

//   props : ['temp1','temp2'],  //如果不用$attrs的话可以采用props来接受,这样可以对 temp1、temp2字段的监听操作

  data() {
      return {

      }
  },

  created() {},
  mounted() {
    //   console.log("son=--this.$attrs",this.$attrs);
    //  console.log("son-0000this.$listeners",this.$listeners);
  },

  computed: {},

  watch: {},

  methods: {
      ab() {
        //   this.$listeners.tempFn('dfdf','125')  //这两种方法都可以，实现
        this.$emit('tempFn','dfdf','125');
      }
  },
};
</script>

<style scoped lang="scss">
</style>

点击fu

点击dd