這里有個注意的地方，Vue實例控制app DIV 大組件，我們在div中天加小組件的時候，傳值需要創建自定義的屬性
之后在通過props:[‘屬性名’] 來把父元素data中的數據傳遞給子組件
<!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> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <!-- 首先我們的Vue實例 控制着app 大DIV 組件，我們通過組件log 有添加了子組件 --> <!-- 父組件可以在引用 子組件的時候，通過屬性綁定（v-bind）的形式，把需要傳遞給子組件的數據，以屬性綁定的形式，傳遞到子組件內部 供子組件使用--> <div class="app"> <log v-bind:parentmsg="msg"></log> </div> <script> // 其中Vue 也可以看作一個大組件，他里面包含了log 子組件 var vm=new Vue({ el:'.app', data:{ msg:'訪問我，你可以嗎？' }, methods: { }, components:{ log:{ // 經過演示，發現 子組件中，默認是無法訪問到父組件中data上的數據和methods方法的 template:'<h1>我像訪問父組件中的msg屬性--------{{parentmsg}}</h1>', // 只有props 是數組 其他的都是對象 // filters:{},components:{}diewctives:{}....... // 注意： 子組件中的 data 數據，並不是通過 父組件傳遞過來的，而是子組件自身私有的，比如： 子組件通過 Ajax ，請求回來的數據，都可以放到 data 身上； // data 上的數據，都是可讀可寫的； data(){ return {title:123,content:'qqqq'} }, // 把父組件傳遞過來的parentmsg屬性，現在props數組中，定義下，這樣，才能使用這個數據 props:['parentmsg'], // 注意： 組件中的 所有 props 中的數據，都是通過 父組件傳遞給子組件的 // props 中的數據，都是只讀的，無法重新賦值 } } }) </script> </body> </html>