• 首页 Home
  • 简介 About
  • 项目 Service
  • 案例 Cases
  • 新闻 News
  • 技术文章 本硕新闻 行业资讯

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

    发表时间:2019-05-10  热度:

    父子组件的传值,在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>
    文章怎么样?
    相关资讯