• 关于 vue2.x 的 $attrs 和 $listeners


    $attrs

    $attrs 用于多层次组件传递参数(组件标签的attribute,class和style除外),爷爷辈组件向孙子辈组件传递参数(注:参数不能被父辈prop识别,一旦被父辈prop识别且获取,则孙子辈组件不能获取到该参数

    写法如下:(注:v-bind不能用简写 :

    <grand-son v-bind="$attrs" />
    

    下面举个栗子:

    爷爷(GrandFather)向父亲(Father)传递一个 msg1

    向孙子(GrandSon)传递一个 msg2,孙子会一并接收 msg1(然而被父亲接走了,所以孙子收不到 msg1

    <!-- GrandFather.vue -->
    <template>
      <div>
        GrandFather:
        <father :msg1="msg1" :msg2="msg2" />
      </div>
    </template>
    
    <script>
    import Father from './Father.vue'
    export default {
      components: { Father },
      data() {
        return {
          msg1: 'msg1',
          msg2: 'msg2'
        }
      }
    }
    </script>
    
    <!-- Father.vue -->
    <template>
      <div>
        Father: {{ msg1 }}
        <grand-son v-bind="$attrs" />
      </div>
    </template>
    
    <script>
    import GrandSon from './GrandSon.vue'
    export default {
      components: { GrandSon },
      props: ['msg1']
    }
    </script>
    
    <!-- GrandSon.vue -->
    <template>
      <div>GrandSon: {{ msg1 }}{{ msg2 }}</div>
    </template>
    
    <script>
    export default {
      props: ['msg1', 'msg2']
    }
    </script>
    

    界面现实结果:

    GrandFather:
    Father: msg1
    GrandSon: msg2
    

    $listeners

    $listeners 用于多层次组件传递事件监听器,爷爷辈组件向父辈、孙子辈、曾孙子辈……组件传递事件(与 $attrs 不同,不存在半路被拦截的情况)

    写法如下:(注:v-on 不能用简写 @,虽然不报错,但是也不生效)

    <grand-son v-on="$listeners" />
    

    下面继续使用 爷爷-> 父亲 -> 孙子 的栗子:

    爷爷(GrandFather)给父亲(Father)绑定一个 click 事件

    父亲通过点击 div 触发 click 事件,同时向孙子(GrandSon)传递 $listeners

    <!-- GrandFather.vue -->
    <template>
      <div>
        GrandFather:
        <father :msg1="msg1" :msg2="msg2" @click="handleClick" />
      </div>
    </template>
    
    <script>
    import Father from './Father.vue'
    export default {
      components: { Father },
      data() {
        return {
          msg1: 'msg1',
          msg2: 'msg2'
        }
      },
      methods: {
        handleClick() {
          console.log('trriger click')
        }
      }
    }
    </script>
    
    <!-- Father.vue -->
    <template>
      <div>
        <div @click="handleFatherClick">Father: {{ msg1 }}</div>
        <grand-son v-bind="$attrs" v-on="$listeners" />
      </div>
    </template>
    
    <script>
    import GrandSon from './GrandSon.vue'
    export default {
      components: { GrandSon },
      props: ['msg1'],
      methods: {
        handleFatherClick() {
          console.log('father click')
          this.$emit('click')
        }
      }
    }
    </script>
    
    <!-- GrandSon.vue -->
    <template>
      <div @click="handleSonClick">GrandSon: {{ msg1 }}{{ msg2 }}</div>
    </template>
    
    <script>
    export default {
      props: ['msg1', 'msg2'],
      methods: {
        handleSonClick() {
          console.log('grandson click')
          this.$emit('click')
        }
      }
    }
    </script>
    

    界面:

    GrandFather:
    Father: msg1
    GrandSon: msg2
    

    点击 Father: msg1,控制台显示:

    father click
    trriger click
    

    点击 GrandSon: msg2,控制台显示:

    grandson click
    trriger click
    
  • 相关阅读:
    两个三汇API使用的坑
    呼叫中心系统架构
    呼叫中心搭建的前期准备步骤
    呼叫中心基础知识
    一步一步开发呼叫中心
    富文本框保存和显示问题
    WebApi和Andriod对接上传和下载文件
    WebApi和Andriod对接访问模式问题
    Sql Server Report Service 的部署问题
    Web API 路由访问设置
  • 原文地址:https://www.cnblogs.com/clis/p/15987533.html
Copyright © 2020-2023  润新知