javascript - VUE父组件model改变后,传入子组件的props为什么没改变?
本文介绍了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屋!
查看全文