DESCRIPTION VUE props and two props non characteristics

　　Characteristics of two props

　　　　①: parent component by way of value-passing properties (such as content in the screenshot below) to the sub-assembly, content is not displayed in the DOM node

　　　　 ②: Father component subassembly to pass a value (content) , the props by receiving subassembly, the subassembly can be directly {} {} (interpolation expression) content or content obtained in this.content

　　Demo

     <!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
           <div id="root">
                <child content="hello world"></child>
           </div>
           
           <script>
                Vue.component('child', {
                     props: ['content'],
                     template: '<div>{{content}}</div>'   
                })
                
                var vm = new Vue({
                     el: '#root'
                })
           </script>
     </body>

</html>

　　Non-props of two properties

　　　　①: parent component subassembly to pass a value (content), the sub-assembly is not received by props, content displayed in the DOM node

　　　　 ②: parent component passing through the attribute values , (content) sub-assembly is not received by The props, this time will be given, suggesting that content can not be used is not defined

　　Demo

 <!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
           <div id="root">
                <child content="hello world"></child>
           </div>
           
           <script type="text/javascript">
                Vue.component('child', {
//                  props: ['content'],
                    template: '<div>{{content}}</div>'   
                })
                
                var vm = new Vue({
                     el: '#root'
                })
           </script>
     </body>

</html>

DESCRIPTION VUE props and two props non characteristics

Guess you like