Vue2.0 子组件的props，无法更新

Question

<tepmalte>
<div>
    //点击a，跳转
    //meta在路由定义好了，这里方便显示而已
    <router-link :to="{meta:{column:1}}">1</router-link>
    <router-link :to="{meta:{column:2}}">2</router-link>
    <router-link :to="{meta:{column:3}}">3</router-link>
    <pro-list :listData='data'></pro-list>
</div>
</tempalte>
<script>
    watch{
        '$route'(to,from){
            this.getData()
        }
    },
    methods : {
        getData(){
            var key = this.$route.meta.column;
            //如果key值存在，根据key值，筛选出需要的数据
            this.data = key ? 
                this.products.filter(function(value) {
                    return value.parId === key
                }) : 
                this.products;
        },

        }
</script>

这个是prolist组件

<template>
<div>
    <transition-group name="flip-list" tag="ul">
        <li v-for='(item, index) in data' :key='item.id' :id='item.id' :parId='item.parId' ></li>
    </transition-group>
</div>
</template>
<script>
    export default{
        props:['listData'],
        data(){
            return {
                data:this.listData
            }
        },

    }
</script>

每当路由发生跳转时，pro-list组件内，没有发生变化，打印信息也没又触发。当时this.data却是改变了。。这是为什么？

Answer 1

其实这么写就够了：

<template>
<div>
    <transition-group name="flip-list" tag="ul">
        <li v-for='(item, index) in listData' :key='item.id' :id='item.id' :parId='item.parId' ></li>
    </transition-group>
</div>
</template>
<script>
    export default{
        props:['listData']

    }
</script>

你转一下data并没有对你自己有特别的好处(貌似你只是用来展示数据？)

Answer 2

楼上+1，既然你用props接收父组件传递过来的变量了，又去data里赋值干嘛呢，直接可以将listData拿去模板渲染了