介绍 & lt; body>
& lt;才能div id=皉oot"比;
,,,& lt; div>
,,,,,& lt; input v模型=癷nputValue",/比;
,,,,,& lt; button @click=癶andleClick"祝辞submit
,,,& lt;/div>
,,,,,& lt; ul>
,,,,,,,& lt; todolist v=?项目、索引),of list"
,,,,,,,,:关键=癷ndex",
,,,,,,,,:内容=癷tem"
,,,,,,,,:指数=癷ndex"
,,,,,,,,@delete=癶andle"
,,,,,,,在& lt;/todolist>
,,,,,& lt;/ul>
& lt;才能/div>
& lt;才能script>
,,,Vue.component (“todolist", {
,,,,,道具:,(& # 39;内容# 39;& # 39;指数# 39;],
,,,,,模板:,& # 39;& lt; li @click=癶andleDelete"在{{内容}}& lt;/li> & # 39;
,,,,,方法:,{
,,,,,,,handleDelete:函数(){
,,,,,,,,,,美元发出(& # 39;删除# 39;,this.index)
,,,,,,,}
,,,,,}
,,,,,})
,,,Vue ({new
,,,,,埃尔:“# root"
,,,,,数据:,{
,,,,,,,inputValue: & # 39; & # 39;
,,,,,,,列表:[]
,,,,,},
,,,,,方法:,{
,,,,,,,handleClick:函数(){
,,,,,,,,,this.list.push (this.inputValue)
,,,,,,,,,this.inputValue=https://www.yisu.com/zixun/?
},
处理:函数(指数){
this.list.splice(指数(1)
}
}
})> & lt; div id=皉oot"比;
,,,& lt; div>
,,,,,& lt; input v模型=癷nputValue",/比;
,,,,,& lt; button @click=癶andleClick"祝辞submit
,,,& lt;/div>
,,,,,& lt; ul>
,,,,,,,& lt; todolist v=?项目、索引),of list"
,,,,,,,,:关键=癷ndex",
,,,,,,,,:内容=癷tem"
,,,,,,,,:指数=癷ndex"
,,,,,,,,@delete=癶andle"
,,,,,,,在& lt;/todolist>
,,,,,& lt;/ul>
& lt;才能/div> Vue.component (“todolist", {
,,,,,道具:,(& # 39;内容# 39;& # 39;指数# 39;],
,,,,,模板:,& # 39;& lt; li @click=癶andleDelete"在{{内容}}& lt;/li> & # 39;
,,,,,方法:,{
,,,,,,,handleDelete:函数(){
,,,,,,,,,,美元发出(& # 39;删除# 39;,this.index)
,,,,,,,}
,,,,,}
,,,,,}) new Vue ({
,,,,,埃尔:“# root"
,,,,,数据:,{
,,,,,,,inputValue: & # 39; & # 39;
,,,,,,,列表:[]
,,,,,},
,,,,,方法:,{
,,,,,,,handleClick:函数(){
,,,,,,,,,this.list.push (this.inputValue)
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关利用Vue父子组件通信怎么实现一个基于功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
<强>先上代码
创建基于网络的基本结构
在这里我们创建了一个基于标签作为父组件,让它在里面循环遍历列表作为我们的输出,同时定义了一个删除的监听事件。
接下来在脚本标签里定义子组件
定义了一个全局类型的子组件,子组件的道具选项能够接收来自父组件数据,道具只能单向传递,即只能通过父组件向子组件传递,这里将上面父组件的内容和索引传递下来。
将李标签作为子组件的模板,添加监听事件handleDelete用与点击李标签进行删除。
在下面定义子组件的handleDelete方法,用这个。美元发出向父组件实现通信,这里传入了一个删除的事件,参数是指数,父组件通过@delete监听并接收参数
<强>接下来是Vue实例
