$attrs、$listeners的使用

$attrs

场景：如果父传子有很多值，那么在子组件需要定义多个 props

解决：$attrs获取 父传子中未在 props 定义 的值

<attrListenerCom title="这是不在子组件prop定义的title" propTitle="这是在子组件定义的proptitle"></attrListenerCom>

<script>
export default {
  components: {},
  props: {
    propTitle: {
      type: String,
      default: ""
    }
  },
  data () {
    return {

    }
  },
  mounted () {
    console.log(this.$attrs) //{title: "这是不在子组件prop定义的title"}
  },
  methods: {

  },
}
</script>

$listeners

场景：子组件需要调用父组件的方法

解决：父组件的方法 可以通过 v-on="$listeners" 传入内部组件

父组件：

<attrListenerCom @change="changeMT"  @setData="setData"></attrListenerCom>

子组件：

<attrListenerCom2 v-on="$listeners"></attrListenerCom2>

<script>
import attrListenerCom2 from './attrListenerCom2'
export default {
  components: { attrListenerCom2 },
  data () {
    return {

    }
  },
  mounted () {
    console.log(this.$listeners);
  },
  methods: {
    changeMT () {
      console.log("changeMT");
    },
    setData () {
      console.log("setData");
    }
  },
}
</script>

孙组件：

<script>
export default {
  components: {},
  data () {
    return {

    }
  },
  mounted () {
    console.log(this.$listeners);
    this.$listeners.change();
  },
  methods: {

  },
}
</script>