Props接收父组件在created中创建的数据

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中定义变化的数据。