Vue从TodoList学习亲子组件沟通

简单到抛光

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

使用代码来实现这一效果：

Div id=' app '输入类型=' text' v-model=' input val '按钮v-: click=' click BTN '提交/按钮ul li v-for='列表中的项目' { item } }/Li/ul/div script let VM=new Vue({ El : ' # app '，data:{ list:[]，inputVal:'' }，Methods 3: { click Btn(){ this。list.push(这个。input val)input val=' ' } } })/脚本当我在输入框中输入内容并点击提交时，Vue会自动在页面上呈现内容。如何实现？

众所周知，Vue是一个MVVM框架，它允许开发人员专注于数据变化，而不关注Dom，所以它的核心是VM层，这意味着渲染不需要开发人员考虑。

圆形v形

V-for指令是Vue提供的一个api，可以实现循环加法

V-for='列表中的项目'将列表中的数据循环添加到页面，并带有值项目

所以当我点击提交的时候，我只需要获取输入框中的值，然后把它们推送到列表中，我们看到的效果就是一个一个的添加。

绑定v型

如何获取输入框中的值成为了一个问题。在使用Vue之前，获取输入框中的值是非常简单的，用$(input)就可以轻松获取。val()。

使用Vue后，不应该操纵Dom来获取值。Vue一定考虑到了这一点，并提供了一个api

V-model='inputVal '第一次用这个指令的时候，踩了一个坑。我在inputVal两边加了双括号，在页面上没有引起任何反应。这里不需要加双括号。Vue提供的模板字符串仅在渲染模板时需要

实现了一个简单的TodoList。

模块化

每个li实际上是一个组件，我们可以以组件的形式开发它

全局组件：

Div id=' app '输入类型=' text' v-model=' input val '按钮v-: click=' click BTN ' submit/button ul todo-list v-for=' list '中的项目v-bind : content=' index '/todo-list/ul/div script Vue.component(' TodoLsit '，{ prop :[' content ']，template:`li{{content}}/li `，})让vm=new Vue({ el:list.push(这个。输入)这个。input val=' ' } } } })/script可以使用Vue提供的组件创建一个全局组件。组件的TodoList名称需要通过模板中的todo-list来实现，大小写变为小写，中间用-连接。

本地组件：

button v-: click=' click BTN ' submit/button ul todo-list v-for=' list中的项目' v-bind : content=' item '/todo-list/ul/div script let to olist={ prop s :[' content ']，template: `li{{content}}/li `，} let vm=new Vue({ el: '#app '，data 33: { list 3:[]，Inputval:名单。推(这个。输入)这个。inputval=''}}})/script使用本地组件声明对象，内容与全局组件相同，但需要在Vue中重新注册，并使用组件属性注册

Component:{ TodoList}涉及使用组件后的数据通信。一般有两种类型：

组件如何获取外部数据组件中的数据变化，外部如何知道父子组件通信

现在上面的功能已经用组件实现了，但是组件中没有数据。如果您将我的输入框中的数据传递给子组件。

从子组件获取数据，或者使用v-for循环，用v-bind绑定所需的数据，用组件中的道具获取绑定的数据

todo-list v-for='(项目，索引)在列表v-bind : content=' item ' v-bind : index=' index ' v-: delete=' handleitemddelete '/todo-list let TodoList={ prop 3360[' content ']，template: `li{{content}}/li `，//content就是相关数据}父-子组件通信实现了往组件里面添加数据，如果子组件中要删除一项，应该怎么操作呢？

子-父组件通信

子-父组件通信，Vue提供了一个$emit()方法，组件中使用绑定事件指令可绑定事件

div id='app '输入类型='text' v-model='inputVal '按钮：click=' clickBtn '提交/button ul待办事项列表v-for='列表v-bind : item=' item ' v-bind : index=' index ' v-: delete=' handleitem delete '/todo-list/ul/div脚本vue。组件(' todolit '，{ prop s 3360[' item '，' index']，模板： ` Li v-: click=' handleitem click ' { item } }/Li `，methods:$emit('delete，this.index) } })让VM=new Vue({ El : ' # app }，data: { list: []，inputVal: '' }，methods : { click Btn(){ this。名单。推(这个。输入值)。输入val=“”}，handleitemddelete(index){ this。名单。拼接(索引，1)} })/脚本组件中绑定事件，第一个参数是事件名，第二个参数是要传递给父元素的参数

模板： ' Li v-: click=' handleItemclick ' { item } }/Li ' '//绑定事件为点击，需要执行的函数是handleitemclichkmethods : {//写在组件里面handleItemClick() { this .$emit('delete，this.index) }}父元素监听事件

待办事项列表v-for='列表v-bind : item=' item ' v-bind : index=' index ' v-: delete=' handleitemddelete '//监听删除事件，执行函数是handleitemdlet/todo-lishandleitemdlet(索引){ //写在某视频剪辑软件实例中this.list.splice(索引，1)}通过父子组件之间的通信，就可以实现父-子子-父之间数据传输问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。