$listeners /$attrs

作者: 练习时长2年半的个人练习生 | 来源:发表于2020-06-19 14:11 被阅读0次

使用方法概括:

$attrs 是父组件绑定给子组件的属性(prop里声明的除外)

$listeners 是父组件绑定的事件集合.可以通过来使来提交提交方法
父组件

  <template>
  <div>
    <span>消息:{{message}}</span>
    <Child name="childName1" @send="sendMeassage" age="17岁" />

    <Child name="childName2" @send="sendMeassage" age="18岁" />
  </div>
</template>
<script>
import Child from "../components/child.vue";
export default {
  name: "index",
  components: {
    Child
  },
  data() {
    return {
      message: "初始化"
    };
  },
  methods: {
    sendMeassage(val) {
      this.message = val;
    }
  },
  computed: {}
};
</script>

子组件

<template>
  <div>
    <span @click="send()">{{$attrs}}</span>
   
    
  </div>
</template>
<script>
  export default {
    name: "child",
   methods: {
     send(){
       console.log('sss')
       this.$listeners.send(this.$attrs.age)
     }
   }
  };
</script>