父子元件資訊傳遞

Dus發表於2018-11-19
元件

子元件訪問父元件的資料

a)在呼叫子元件時，繫結想要獲取的父元件中的資料
b)在子元件內部，使用props選項宣告獲取的資料，即接收來自父元件的資料
總結：父元件通過props向下傳遞資料給子元件
注：元件中的資料共有三種形式：data、props、computed
<!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>

相關文章