Props接收父组件在created中创建的数据
1.在created中创建的数据的用途
一般在created生命周期中创建的数据都是一个 常量,并不会发生改变。
因此在created中创建的数据一般都用作常量。
2.在created中创建的数据的特点
根据Vue的官方文档的描述,没有在data中初始化的数据是不具有响应式的特性。其本质是所有在生命周期data后创建的数据都不具有响应式的特性。因为数据的响应式特性会在data这个生命周期完成。
因此改变created中创建的数据时,并不会同步到页面中。
<div id="app">
<p>{{a}}</p> //10
<button @click="changeA">changeA</button>
</div>
<script>
var vm = new Vue({
el: "#app",
created() {
this.a = 10
},
methods: {
changeA() {
this.a = 20;
console.log(this.a); // 20
}
}
});
</script>
当点击按钮改变数据a时,其数据已经发生了变化,但是由于不是响应式的,因此在页面上a的变化并没有体现出来。
3.用props接收
props接收数据的特点:props接收数据发生在data之前,因此其数据是响应式的。当父组件数据的变化传递到子组件时,子组件的页面会响应式的变化。
有时候我们需要使用props接收created中的数据。但是仅仅接收created中的数据时,当created中的数据发生改变时,这种变化传递不到子组件。这是因为,created中的数据不是响应式的,即使改变了数据,但是并不会重新触发接收事件使数据变化传递到子组件中。因此此时子组件的数据并没有得到更新。
父组件:
<template>
<div id="app">
<button @click="changeA">changeA</button>
<children :aFromCreated='a'></children>
</div>
</template>
<script>
import Children from "./components/Children";
export default {
created() {
this.a = 10;
},
methods:{
changeA(){
this.a = 20;
}
},
components: {
Children,
},
};
</script>
<style>
</style>
子组件:
<template>
<div>
<p>{{aFromCreated}}</p>
</div>
</template>
<script>
export default {
props:['aFromCreated'],
}
</script>
点击按钮触发changeA事件,改变了created中创建的数据a。虽然在子组件中通过props对数据a进行了接收,使得数据a在子组件中是一个响应式的数据。但是在父组件中a是非响应式的,所以改变a并不会触发子组件的接收事件。导致a在子组件中仍然是旧数据。
要想解决这个问题,可以在子组件中绑定一个响应式的数据msg,改遍a的同时改变msg,触发接收时机,使得a的改变可以被子组件接收。
父组件:
<template>
<div id="app">
<button @click="changeA">changeA</button>
<children :aFromCreated='a' :msg='msg'></children>
</div>
</template>
<script>
import Children from "./components/Children";
export default {
data(){
return {
msg: '欢迎学习vue.js'
}
},
created() {
this.a = 10;
},
methods:{
changeA(){
this.a = 20;
this.msg='别来学vue.js了'
}
},
components: {
Children,
},
};
</script>
<style>
</style>
子组件:
<template>
<div>
<p>{{aFromCreated}}</p>
</div>
</template>
<script>
export default {
props:['aFromCreated','msg'],
}
</script>
4.弊端
上述的方法虽然解决了父组件数据传递到子组件的问题,但是子组件多接收了一个数据。这对于项目来说是一个多余的。
因此解决上述的方法,最好的还是,将created中可能发生变化的数据,重新定义在data中,使之变为一个响应式的数据。
写这个问题仅仅只是解释造成子组件数据为更新的原因。建议大家还是遵循vue的原则,在data中定义变化的数据。
的问题,但是子组件多接收了一个数据。这对于项目来说是一个多余的。
因此解决上述的方法,最好的还是,将created中可能发生变化的数据,重新定义在data中,使之变为一个响应式的数据。
写这个问题仅仅只是解释造成子组件数据为更新的原因。建议大家还是遵循vue的原则,在data中定义变化的数据。