大家好，又见面了，我是你们的朋友全栈君。
1、子组件向父组件传值、
vue中splice和$emit使用：https://blog.csdn.net/BlackPlus28/article/details/100136811
<body>
<div id="app">
<!-- v-model 数据双向绑定 -->
<input type="text" v-model="inputvalue"/>
<!-- v-on 绑定事件 -->
<button v-on:click="handleBtnClick">提交</button>
<!-- 通过list循环出多少个组件，把循环出的值借助v-bind中的content传递过去 -->
<!-- 动态地绑定一个或多个特性，或一个组件 prop 到表达式 -->
<todo-item
v-bind:content="item" v-for="(item,index) in list" v-bind:index="index" v-on:delete="handleItemDelete" >
</todo-item>
</ul>
</div>
<!--
删除功能
1、当点击输出列表时，在父组件绑定事件监听器，会触发handleItemDelete函数，就会执行父组件中的handleItemDelete函数
1.1 通过v-bind也把index(表明todo-item是第几个)传递过去，子组件想用index，就必须要在props中声明一下，父组件传递的index就会被子组件接受
1.2 当被触发时传递delete标识，并传递参数index==》带给父组件，父组件v-on在监听===》handleItemDelete并将index传递过去
2、点父组件监听到点击事件时就会，this.list = []; ==》 当点击列表时就会出现清空数组所有元素 当list为空时，item也就为空，页面上todo-item也就不会存在
2.1 handleItemDelete通过alert就能接受到index下标 ===》 通过 this.list.splice(index,1); 对数据进行删除后
v-bind===>':' 、 v-on===>'@'
注：props是子组件访问父组件数据的唯一接口
-->
<script>
// 定义局部组件，必须进行注册(把TodoItem注册到vue实例中),
var TodoItem = {
// 子组件想用index就必须接受这个数据
props:['content','index'],
template:"<li v-on:click='handleClick'>{
{content}}</li>",
methods:{
handleClick:function(){
this.$emit("delete",this.index);
// alert("click")
}
}
}
// 注册组件为components
var app = new Vue({
el:'#app',
components: {
TodoItem:TodoItem
},
data:{
list:[],
inputvalue:'',
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputvalue); // 当点击之后会把inputvalue中的值进行循环遍历出
this.inputvalue = '';
// alert(this.inputvalue); // 获取到data中的inputvalue值
},
// 当监听到这个事件之后
handleItemDelete:function(index){
// this.list = [] // 演示过程步骤
this.list.splice(index,1);
// alert(index);
}
}
})
</script>
</body>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/147170.html原文链接：https://javaforall.net
