vue中的单项数据流

两个组件之间的数据流动：

单项数据流：

• 父组件中的数据可以通过props流动到子组件中，并且当父组件中的数据
• 发生改变的时候，子组件会自动接收到这个修改后的数据，
• 并且更新页面中的内容。这就是 Vue 中的单项数据流

• 所以，数据一般是由父组件提供的，当父组件中的数据发生了改变，子组件就会自动接收到这个数据的变化，从而更新子组件

双向数据绑定： data中的数据（Model） 与 视图中的表单元素（View）

  <div id="app">
    <button @click="changeMsg">修改父组件中的数据</button>
    <child :msg="msg"></child>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'parent'
      },

      methods: {
        changeMsg() {
          this.msg = 'change'
        }
      },

      components: {
        child: {
          template: `
            <p>接收到父组件中的数据为：{{ msg }}</p>
          `,

          props: ['msg']
        }
      }
    })
  </script>