zoukankan      html  css  js  c++  java
  • vue2 inheritAttrs、attrs和attrs和listeners使用

    inheritAttrs、attrsattrs和listeners使用场景:

    组件传值,尤其是祖孙组件有跨度的传值。

     (1)inheritAttrs

    属性说明:https://cn.vuejs.org/v2/api/#inheritAttrs

    说明比较晦涩。

    组件传值一般是通过props传值的。inheritAttrs默认值为true,true的意思是将父组件中除了props外的属性添加到子组件的根节点上(说明,即使设置为true,子组件仍然可以通过$attr获取到props意外的属性)。示例代码:

    grandpaDom.vue:

    <template>
       <div>
         <father-dom
          :foo="foo"
          :coo="foo"
          v-on:upRocket="reciveRocket"
         >
         </father-dom>
       </div>
    </template>
    <script>
       import fatherDom from "./fatherDom.vue";
       export default {
         data() {
            return {
              foo:"Hello, world",
              coo:"Hello,rui"
            }
         },
         components:{fatherDom},
         methods:{
           reciveRocket(){
             window.console.log('火箭发射成功!')
           }
         }
       }
    </script>
     

    fatherDom.vue:

    <template>
       <div>
         <p>------------fatherDom-------------</p>
          <p>attrs:{{$attrs}}</p>
          <p>foo:{{foo}}</p>
          <p>------------fatherDom-------------</p>
          <child-dom v-bind="$attrs" v-on="$listeners"></child-dom>
       </div>
    </template>
    <script>
    import childDom from "./childDom.vue";
    export default {
     name:'father-dom',
     props:["foo"],
     components:{childDom},
    }
    </script>
     

    说明:grandpaDom.vue将foo和coo属性都放在fatherDom.vue上,但是fatherDom.vue的props值接收了foo,因此grandpaDom的coo属性显示在了fatherDom的根节点上。即:

    接着将inheritAttrs:false后(请将fatherDom.vue添加inheritAttrs:false),coo属性就不会显示在fatherDom根节点上了。但是怎么获取到coo呢

    这时就通过$attrs获取到到coo。

    接着看孙组件childDom.vue:

     
    <template>
      <div>
        <p>------------childDom-------------</p>
        <p>coo:{{coo}}</p>
        <button @click="startUpRocket">我要发射火箭</button>
        <p>------------childDom-------------</p>
      </div>
    </template>
    <script>
    export default {
      name: "childDom",
      props: ["coo"],
      methods: {
        startUpRocket() {
          this.$emit("upRocket");
          window.console.log('我要发射火箭了。')
        }
      }
    };
    </script>
     

    孙组件childDom.vue就可以通过props接收到coo属性了。

    好,以上是总祖父--父亲--儿子向下传递值

    那怎么儿子-父亲--祖父传递数据呢呢?

    父亲组件使用$listeners传递。

    最终祖父组件收到孙组件的事件了。

     转自:https://www.cnblogs.com/mengfangui/category/968713.html

  • 相关阅读:
    AtCoder Regular Contest 093
    AtCoder Regular Contest 094
    G. Gangsters in Central City
    HGOI 20190711 题解
    HGOI20190710 题解
    HGOI 20190709 题解
    HGOI 20190708 题解
    HGOI20190707 题解
    HGOI20190706 题解
    HGOI 20190705 题解
  • 原文地址:https://www.cnblogs.com/xujian2016/p/10183752.html
Copyright © 2011-2022 走看看