前面我们学习了组件的传值和校验，这节课需要给大家补充一个知识点——单项数据流。

当使用Vue.js构建Web应用程序时，一个非常重要的概念是单向数据流。因为Vue采用了这种模型来管理数据和UI之间的交互关系。

vue组件中所有的 props 都遵循着单项绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这样确保了组件的状态始终是可预测的，避免了子组件意外修改父组件状态的情况，省得出现各种奇葩的错误。

下面是一个典型的Vue应用中的单向数据流示例：

<script>
  const ChildComponent = {
    props:['message'],
    template:`<div>{{message}}</div>`
  }

  const app = Vue.createApp({
    components: {
      ChildComponent
    },
    data() {
      return {
        msg: "hello world!"
      }
    },
    template: `
      <h2>这是父组件</h2>
      <child-component :message="msg" />

    `
  })
  const vm = app.mount("#app")
</script>

我们可以看到在父组件中，我们使用了<child-component>组件，并给它传递了message属性。在子组件我们就可以通过props来访问该属性的数据。

父组件更新子组件的props（单向数据流）

假设现在我们需要修改子组件<child-component/>中message的数据。我们如果直接在子组件中通过this.message来赋值修改props，其实它是不会有任何效果的，并且还会我们报警告。

const ChildComponent = {
    props:['message'],
    methods: {
      updateMessage() {
        this.message = "这是新的message数据"
      }
    },
    template:`
      <div>{{message}}</div>
      <button @click="updateMessage">修改message</button>
    `
  }

所以如果我们要修改子组件的props属性，是需要通过修改父组件的状态来实现：

<script>
  const ChildComponent = {
    props:['message'],
    template:`
      <div>{{message}}</div>
    `
  }

  const app = Vue.createApp({
    components: {
      ChildComponent
    },
    data() {
      return {
        msg: "hello world!"
      }
    },
    methods: {
      updateMessage() {
        this.msg = "这是新的message数据"
      }
    },
    template: `
      <h2>这是父组件</h2>
      <ChildComponent :message="msg" />
      <button @click="updateMessage">修改message</button>
    `
  })
  const vm = app.mount("#app")
</script>

我们可以看到在updateMessage方法中，更改了父组件的msg变量。当父组件状态更新时，子组件就会自动更新出新数据。

这是一个非常简单但重要的概念 – 单向数据流。只有通过父组件传递数据给子组件，并且只能由父组件更新作为props传递给子组件的值。

从这个案例中，大家应该可以很好的理解vue中单项数据流