VUE 组件传值

父组件向子组件传值:

父组件: 

<template>
    <div class="container">
        <h1>
            {{title}}
        </h1>
        <p>发表于{{date | moment}}</p>
        <p class="lead">{{content}}</p>
        <!--通过组件标签的自定义属性 来传值-->
       <app-author :articalName="name" ></app-author>
    </div>
</template>

<script>

import moment from "moment"
import Author from "./Author.vue"
export default {
    data(){
        return {
            title : "震惊!!!!!",
            date : new Date(),
            content :  "为何过年亲戚催婚!",
            name : "chenlong",
        }
    },
    filters: {
        moment  : function(value){
            return moment(value).format("MMMM Do")
        }
    },
    components :{
        "app-author" : Author
    }
}
</script>

<style scoped>
*{
    color : red;
}
</style>

子组件 : 需要写明关注那些自定义属性

<template>
    <div>
     <p>Writen By {{articalName}}</p>   
    </div>
</template>

<script>
export default {
    props : ["articalName"],


}
</script>

子组件中可以限制参数的类型 : 例如 : 这样组件就会期待 一个 String 类型 的 参数, 其他类型的参数传入就会报错

<template>
    <div>
     <p>Writen By {{articalName}}</p>   
    </div>
</template>

<script>
export default {
    props : {
        articalName : String
    }


}
</script>

在父页面中传入123    可以成功渲染 但是会报错  : 期待的是一个字符串形式的 "123" ,得到的是 123

参数的设置 还有 默认值的设置 , 是否必填等  : 如下 :   default 和 required 只能存在一个 有默认值就代表一定需要

<template>
    <div>
     <p>Writen By {{articalName}}</p>   
    </div>
</template>

<script>
export default {
    props : {
        articalName : {
            type : String,  //可以写成数组模式 : [String , Number]
            //default 和 required 只能存在一个 有默认值就代表一定需要
            required : true,
        }
    }
}
</script>

在 有required 属性时 去掉父组件中去掉  :articalName="name"   就会报错 :

type 可以写成  [String, Number] 数组形式  ,接收多种形式的参数