vue中父組件使用props或者$attras向子組件中傳值

知識點：vue中使用props或者$attras向子組件中傳值

  (1) props傳值

子組件必須注冊好要傳的數據（）

 props:['id']

（2）$attrs傳值

  該數據在props中，沒有注冊過，如注冊過了，則$attrs中無此數據

父組件：

<div id="parent" v-cloak>

       <template>
          <mychild :id="id"  :strname="strname"  :age="age" ></mychild>
      </template>

</div>
<script>

new Vue({
    el: '#parent',
 data:function() {
 return {
           id:1001,
           strname:'名稱',
           age:25
         }
     },

});
</script>

子組件：

var html_mychild =

+ "   <div>\n"
....頁面內容

+ "  </div>\n"

Vue.component('mychild', {
    template: html_mychild,
 props: ['id'], //1. props傳值，注冊id,id和:id="id" 冒號后面的id名稱一樣
 data: function () {
 return {
 id:this.id
        }
    },
    created: function () {
 var id=this.id;//獲取父組件傳過來的,props注冊過的id值
 var attr=this.$attrs;//2.$attrs傳值，獲取父組件傳過的所有的，並且不在props中注冊過的值
 var name = this.$attrs.strname;
 },

});

 上面獲取的值如下