vue综合组件间的通信详解
程序员文章站
2022-07-06 21:05:12
本文实例为大家分享了vue综合组件间的通信，供大家参考，具体内容如下
实现一个todolist。
①完成所有的组件的创建和使用
②add
点击add按钮时候，将...
本文实例为大家分享了vue综合组件间的通信，供大家参考，具体内容如下
实现一个todolist。
①完成所有的组件的创建和使用
②add
点击add按钮时候，将用户输入的内容（todoinput），显示在（todolist）
核心代码：兄弟组件间通信
步骤1：var bus = new vue()
步骤2：在准备接受数据的组件
bus.$on('addevent',function(){
})
步骤3：触发事件
bus.$emit('addevent',123)
将todolist中数组的元素 渲染在todoitem的每一个span标签。（父子组件通信）
③delete
在todoitem中点击delete按钮时，将该todoitem删除，由于todoitem的数量 取决于 todolist中数组
子组件 和 父组件通信：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<todobox></todobox>
</div>
<script>
<!--兄弟间通信-->
var bus = new vue();
// input组件
vue.component("todoinput",{
// 保存用户输入的数据
data:function(){
return{
userinput:""
}
},
methods:{
sendinput:function(){
// 触发自定义事件，将this.userinput这个传递到todolist
bus.$emit("addevent",this.userinput);
this.userinput = "";
}
},
template: `
<div>
<h1>待做事项</h1>
<input type="text" placeholder="健身" v-model="userinput"/>
<button @click="sendinput">add</button>
</div>
`
})
// 列表组件
vue.component("todolist",{
// 保存传递来的用户输入的数据
data:function(){
return{
inputlist:[]
}
},
beforemount:function(){
// 触发绑定
// msg就是事件触发后传递过来的数据
//var that = this;
bus.$on("addevent",(msg)=>{
// 保存到数组inputlist中
this.inputlist.push (msg) ;
})
},
template: `
<div>
<ul>
<todoitem v-bind:content="tmp" v-for="(tmp,index) in inputlist" v-bind:key="index" v-bind:myindex="index"></todoitem>
</ul>
</div>
`
// 出现警告，加下标，提高列表渲染
})
// item组件
vue.component("todoitem",{
// props子组件获取父组件的数据，将todolist中的内容以及内容的下标获取
props:["content","myindex"],
methods:{
// 通过下标删除
deletelist:function(){
this.$parent.inputlist.splice(this.myindex,1);
}
},
template: `
<div>
<li>
<button @click="deletelist">delete</button>
<span>{{content}}</span>
</li>
</div>
`
})
//根组件
vue.component("todobox",{
template:`
<div>
<todoinput></todoinput>
<todolist></todolist>
</div>
`
})
new vue({
el: "#container",
data: {
msg: "hello vue"
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： mui上拉加载更多下拉刷新数据的封装过程
下一篇： Vue中正确使用jQuery的方法