vue props+watch

父组件通过v-bind绑定数据：

<template>
    <router-view :yourdata="yourdata"></router-view>
</template>
<script>
export  default {
    data:function() {
        return {
            yourdata:"这是一段测试文字。",
        }
    }
}
</script>

子组件通过props接收数据：

<template>
    <div>{{yourdata}}</div>
</template>
<script>
export  default {
    props: ['yourdata']
}
</script>

但是，如果父组件的yourdata是一个动态的数据，比如是使用axios动态请求回来的，那么这个数据是不会再子组件中变更的，那么就要用到watch：

<template>
    <div>{{newdata}}</div>
</template>
<script>
export  default {
    data:function(){
        return{
            newdata:"",
        }
    },
    props: ['yourdata'],
    watch:{
        yourdata:function (newVal,oldVal) {
            this.newdata=newVal;//newVal就是获取的动态新数据，赋值给newdata
        }
    }
}
</script>