21vue學習_父元件通過props傳遞資料給子元件
阿新 • • 發佈：2021-02-07
技術標籤：VUE
1、vue例項可以看成是一個父元件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title-hellovuejs</title> </head> <body> <div id ="app"> <!-- 3.使用元件 --> <!-- <cpn v-bind:cmovies='movies' :cmessage='message'></cpn> --> <!-- 引數在這裡繫結傳入 --> <cpn :cmovies='movies' :cmessage='message'></cpn> <!-- 下面是沒有傳遞時，預設值的測試 --> <!-- <cpn :cmovies='movies'></cpn> --> </div> <!-- 模板分離寫法2 ，推薦，使用template標籤--> <template id="cpn1"> <div> <!-- <p>{{cmovies}}</p> --> <ul> <li v-for="item in cmovies">{{item}}</li> </ul> <h2>{{cmessage}}</h2> </div> </template> <script src="../js/vue.js"></script> <script> const cpn ={ template: '#cpn1', // (1)第一種寫法 // props: ['cmovies','cmessage'], //（2）第二種寫法，以物件的形式還可以限制類型 // props:{ // cmovies: Array, // cmessage: String // }, //(3)第三種方法，還可以提供預設值 props:{ cmovies: { type: Array, default(){ return [] } }, cmessage: { type: String, default: "initaaa", //required定義true後，則必須呼叫，否則報錯 required: true } }, data(){ return{} }, methods:{ } }; //root元件 const chen1 = new Vue({ el: '#app', //用於掛載要管理的元素 data:{//定義資料 message:'你好啊，helloword', movies: ['葫蘆娃','大鬧天宮','功夫熊貓'] }, components:{ cpn } }) </script> </body>
