vue 组件更新问题

首先祝各位新春快乐~

<div id="app">
  <hello :name="name"></hello>
</div>
import Vue from 'vue'
import Hello from './Hello.vue'

var app = new Vue({
  el: '#app',
  data: {
    name: 'world'
  },
  components: {
    Hello
  }
})

setTimeout(() => {
  app.name = 'abc'
}, 1000)

组件Hello.vue如下:

<template>
  <div>
    hello {{txt}}
  </div>
</template>
<script>
  export default {
    data () {
      return {
        txt: this.name
      }
    },
    props: {
      name: {
        type: String,
        default: ''
      }
    }
  }
</script>
<style>
</style>

我发现1秒后,app.name已经改变了,但是组件却没有发生变化,想请教下这个问题的原因?难道是组件一旦渲染完毕,就不会再更新了吗?

我听说的方法是可以把组件加上v-if,需要刷新的时候,通过v-if="false"先销毁掉,之后在重新生成进行渲染。

同时想寻求合理的解法~ 希望老师能解答下~

回复
阅读 6.5k
3 个回答

谢邀!
你遇到问题应该是data没有响应后续props的变化。 这个其实也好理解,data作为初始化数据的阶段,自然只会执行一次,即组件创建那次。 而之后props虽然有变化,data里却不会跟着变了。

v-if的招就算了,好像很麻烦的样子,可以试试computed:

<template>
  <div>
    hello {{txt}}
  </div>
</template>
<script>
  export default {
    computed: {
      txt () {
          return this.name;
      }
    },
    props: {
      name: {
        type: String,
        default: ''
      }
    }
  }
</script>
<style>
</style>

个人理解:因为你是首先把this.name赋值给了txt,打印的也是txt,所以哪怕this.name再改变了可是txt却不会自动随着this.name的改变而改变。

解决方法:要么直接打印name

要么监听name值的变化

watch:{
'name':function(newval,oldVal){
this.txt = newVal;
}

要么像楼上说的使用计算属性。

难道就没有人想到直接把{{txt}}换成{{name}}吗?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏