vue传值 ---- >> 父传子，props()

父组件：

 

 

<template>
    <div class="comment">
        <div>comment</div>
        <div class="btn">
            <router-link :to='{name:"shopping", query: { id: userID}}' @click="tiao()" tag="span" >跳转</router-link>
        </div>
        <shopping :message="HelloWorld"></shopping>
    </div>
</template>
<script>
import shopping from '../shopping/shopping'
export default {
    name:"comment",
    components:{shopping},
    data() {
        return {
            userID:1,   
            HelloWorld:[
                {id:"4343"},
                {id:"gfgf"},
                {id:"jhj8787"},
            ]
        }
    },
    methods: {
        tiao(){
            // console.log(this.$route.query.id)
        }
    },
   
}
</script>
<style lang="stylus" scoped>
.comment
    margin 100px
    .btn 
        margin-top 20px
        span 
            cursor pointer
            border 1px solid #ccc
            height 20px
            line-height 20px
            color #000
            padding 20px 30px
            border-radius 10px
            margin-bottom 50px  
            display block
</style>

 

<template>
<div>
    <!-- <div>子页面</div> -->
    <div class="mess">
        <div  v-for="(item,index) in message" :key="index">
            {{item.id}}  
        </div>
    </div>
</div>
</template>
<script>
export default {
    name:"shopping",
    props: {
        message:{
            type : Array,
            default: function() {
               return []
             }
        },
    },
    data() {
        return {
            
        }
    },
    created(){
        // console.log(this.message)
    }
}
</script>

 

父传子，父组件引用子组件，子组件是公用的，父组件传什么子组件就显示什么。

所以，改变数据只要改变父组件的数据，就可以了。