Vue中如何实现从长尾词组件到根组件的通信？

本文共计1436个文字，预计阅读时间需要6分钟。

简单的 TodoList 实现一个简单的 TodoList 功能，当输入内容后，点击提交按钮自动添加到下面。如下所示：

{{ item }}

简单的 TodoList

实现一个简单的 todolist，当我输入内容后，点击提交自动添加在下面，如下图所示：

用代码实现这个效果：

<div id="app"> <input type="text" v-model="inputVal"> <button v-on:click="clickBtn">提交</button> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script> let vm = new Vue({ el:'#app', data:{ list:[], inputVal:'' }, methods:{ clickBtn(){ this.list.push(this.inputVal) inputVal = '' } } }) </script>

当我在input框中输入内容后，点击提交，Vue 会自动将内容渲染在页面中，具体是怎么实现的呢？

我们都知道 Vue 是一个 MVVM 框架，让开发者专注于数据变更，无需关注 Dom，所以它的核心是VM层，也就是说渲染这部分不需要开发者考虑了。