[vue]子组件通过props获取父组件数据以及使用watch解决动态数据不生效问题

父子组件的传值,在Vue官方也写得很清楚,父组件中使用v-bind绑定传送,子组件使用props接收。

父组件通过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>

快去尝试一下吧~

本站资源均源自网络,若涉及您的版权、知识产权或其他利益,请附上版权证明邮件告知。收到您的邮件后,我们将在72小时内删除。
若下载资源地址错误或链接跳转错误请联系站长。站长q:770044133。

» [vue]子组件通过props获取父组件数据以及使用watch解决动态数据不生效问题

发表评论

免登录下载网,提供全网最优质的资源集合!