vue props+watch
父组件通过v-bind绑定数据:<template><router-view :yourdata="yourdata"></router-view></template><script>exportdefault {data:function() {return {yourdata:"这是一段测试文字。",}}}</script&g
·
父组件通过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>
更多推荐
已为社区贡献4条内容
所有评论(0)