vue组件传参

父传子：

文件结构：

配置路由：

 

 

父组件：

<template>
    <div>
        <div>我是父组件</div>
        <children message1='我是直接参数' v-bind:message2='msg' :message3='obj'></children>
    </div>
</template>

<script>
    import Children from './children'
    export default{
        components:{
            Children
        },
        data(){
            return{
                msg:'我是父组件的参数'
            }
        },
        created(){
            this.obj = {a:'1',b:'2',c:'3'}
        }
    }
</script>

<style>
</style>

子组件：

<template>
    <div>
        <div>我是子组件</div>
        <div>{{message1}}</div>
        <div>{{message2}}</div>
        <div>{{message3}}</div>
    </div>
</template>

<script>
    export default{
        props:['message1','message2','message3'],
        created(){
            console.log(this.message3)
        }
    }
</script>

<style>
</style>

展示到浏览器：