Vue组件传值

一、父子组件传值

1、父组件写法

<template>
	<show-url  :message="msg"></show-url>
</template>

<script>
    import showUrl from "./ShowUrl";
export default {
    //子组件
    components:{
        showUrl,
    },
    data(){
	    return {
			msg:'要传的值',
		}
	}
}
</script>

2、子组件接值

<div>
    <p>{{message}}</p>
</div>

data(){
    props:["message"]
    }

//或接收指定类型
props: {
    message: {
        type: String,                 //可指定接收类型，如:Array.
        default:"this is default"     //可设置默认值
    }
}