父子元件資訊傳遞
阿新 • • 發佈：2018-11-19
父元件資訊傳遞給子元件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <my-hello></my-hello> </div> <template id="hello"> <div> <h3>我是父元件 </h3> <h2>msg: {{msg}}</h2> <hr> <my-world :message="msg"></my-world> </div> </template> <template id="world"> <div> <h3>我是子元件</h3> <h3>父元件的資訊:{{message}}</h3> </div> </template> </body> <script> new Vue({ el: "#app", components: { 'my-hello':{ data: function () { return { msg: '這是父元件的資訊' } }, template: "#hello", components:{ 'my-world':{ template:"#world", props: ['message'], props:{ //也可以是物件，允許配置高階設定，如型別判斷、資料校驗、設定預設值 message:String, name:{ type:String, required:true }, age:{ type:Number, default:18, validator:function(value){ return value>=0; } }, user:{ type:Object, default:function(){ //物件或陣列的預設值必須使用函式的形式來返回 return {id:3306,username:'秋香'}; } }, } } } }) </script> </html>