javascript - VUE父组件model改变后,传入子组件的props为什么没改变?

查看:147
本文介绍了javascript - VUE父组件model改变后,传入子组件的props为什么没改变?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

VUE父组件model改变后 传如子组件的props为什么没改变?

父组件

<script>
    import Slide from "./slide/slide"
    var vm = {
        data(){
            return {
                banner:100
            }
        },
        methods: {
            test:function (argument) {
                this.banner += 10;
            }
        },
        beforeCreate(){

        },
        created(){
            
        },
        mounted(){
        },
        components: {
            Slide
        }
    }
    export default vm
</script>
<style src="./index.css" scoped></style>
<template>
    <div @click='test' class="index-content">
        <Slide :data='banner'></Slide>
        {{banner+':index'}}
    </div>
</template>

子组件

<script>
export default {
  props:['data'],
  data(){
    return {
      url:this.data
    }
  },
  methods: {
  }
}

</script>

<style src="./slide.css" scoped></style>
<template>
  <div class="slide">
      {{url}}
  </div>
</template>

我点击test方法后 改变 父组件的banner 这个banner传入子组件后子组件的model为什么没改变?

解决方案

因为你模版中用的是 data 里面的数据, 而不是 props 里面的, 你只在初始化的时候给 data 赋值, 如果需要 props 改变的同时改变 data, 那就需要加上 watch, 不过你这种情况直接用 props 就好了.

这篇关于javascript - VUE父组件model改变后,传入子组件的props为什么没改变?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆