vue stepped pit components by value Diary 1

Today, with seldom used by value, it is the newly added attribute $ attrs $ listener and inheritAttrs later V2.4.

Summary: this form of code components for the set of her mode of transfer, is not suitable for traditional values brothers components, by value like that, you need to create an event bus, it means a fresh new empty vue, see, my The second log "vue stepped pit components by value diaries 2"

Ado, directly on the code, you can test the effect of side comments while watching it

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      < COM1 > </ COM1 > 
    </ div > 
    < Template ID = "COM1" > 
      < div > 
        < div > I progenitor assembly </ div > 
        < br > 
        < span > I progenitor component modified data: {{ }} curTitle </ span > 
        < COM2 : G-MSG = "MSG" : G-title = "title" @setTitle = "setTitle" > </ COM2 > 
      </ div > 
    </template>
    <Template the above mentioned id = "com2" > 
        < div > 
            < div > I am a parent component </ div > 
            < COM3 v-the bind = "$ attrs" v-ON = "$ in the Listeners" > </ COM3 > 
        </ div > 
    
    </ Template > 
    < Template ID = "COM3" > 
        < div > 
            < div > I component Sun </ div > 
            received data ancestral components: gTitle {{}} 
            < br >
            <button @click="setPtitle">
                发送给祖组件数据
            </button>
        </div>

    </template>
    <script src="/lib/vue/vue.js"></script>
    <script>
      var com3 = {
        template: "#com3",
        data() {
          return {
            title: "",
            msg: "",
            gTitle:'',
          };
        },
        Mounted () { 
            the this .gTitle =  the this . attrs $ [ ' G-title ' ] // may not define new attributes, write directly attrs $ [ 'G-title'] 
            the console.log ( ' Sun component ' , the this . $ attrs, the this . $ in the Listeners); 
        }, 
        methods: { 
            setPtitle () { 
                // method name where the case should pay attention to, is the pit where he has been given a yellow tip but I ignored, and later print output console.log, found that the method name is lowercase, it is written in lowercase method names on OK, and the method name of this place are a lot of online component bindings and write the same case over there, afraid to run in accordance with the ten thousand years are also failures. . 
                the this . $ EMIT ( ' setTitle ' , ' received, learn, every day ' );
            } 
        }, 
      }; 
      Var com2 = { 
        Template: " # com2 " , 
        inheritAttrs: false , // here if you write true or not write this sentence, you can clearly see when you bind custom value (DOM when viewing the site and see the actual value of this custom property, do not want people to see the words to write about is OK) 
        props: {
             // here is the need to take note of, if passed ancestral property in the component here is declared, that component will get less than the Sun, because they were cut off here ,, interested can lift comment here look at the output 
            // GMSG: { 
            //      of the type: String 
            // }, 
            // gTitle: { 
            //      type: String 
            // } 
        }, 
        Data () { 
          return {};
        },  
        Mounted () {
            The console.log ( ' parent element ' , the this . $ Attrs) 
        }, 
        Components: { 
          COM3 
        } 
      }; 
      var COM1 = { 
        Template: " # COM1 " , 
        Data () { 
          return { 
            title: " You have a new message " , 
            msg: " change themselves, understanding of the world " , 
            curTitle: '' 
          }; 
        }, 
        Components: { 
          com2 
        }, 
        Methods: {
          setTitle(msg) {
            this.curTitle=msg;
          }
        }
      };
      new Vue({
        el: "#app",
        components: {
          com1
        }
      });
    </script>
  </body>
</html>

vue stepped pit components by value Diary 1

Guess you like