Vue父子组件传值 v-bind:、this.$emit、 this.list.splice(index,1)、@delete等的使用
点击提交:然后鼠标点击一个内容:<body><!--a.父组件向子组件传值:通过v-bind:的形式进行数据的传递(可直接简写为冒号)然后子组件 使用props来接收b.子组件向父组件传值:局部组件TodoItem的li有handleItemClick事件...
·
点击提交:
然后鼠标点击一个内容:
<body>
<!--
a.父组件向子组件传值:通过v-bind:的形式进行数据的传递(可直接简写为冒号)
然后子组件 使用props来接收
b.子组件向父组件传值:
局部组件TodoItem的li有handleItemClick事件
this.$emit("delete",this.index):子组件向外触发事件,并携带参数
父组件中 @delete="handleItemDelete" 监听到删除事件,
于是调用handleItemDelete:function(index)方法
-->
<div id="root">
<div>
<input type="text" v-model="inputValue">
<button v-on:click="handleBtnClick">提交</button>
</div>
<ul>
<!--<li v-for="item in list">{{item}}</li>-->
<!--父组件(最外层的Vue实例)中data里面的list 传给子组件
子组件遍历list,得到item,然后给了子组件的一个变量content
创建这个子组件todo-item的同时,也监听到子组件的delete事件
index指的是是第几个todo-item
向子组件传值:不仅传content,还把对应的下标传下去
-->
<todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleItemDelete"> <!--父组件监听delete事件 去执行handleItemDelete方法-->
</todo-item>
</ul>
</div>
<script>
//2.局部组件 同样,子组件要是想用index,就必须接收index
var TodoItem ={
props:['content','index'],
template:"<li @click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick:function () {//子组件一旦被点击 不但触发delete事件,同时还把this.index作为参数 带给父组件
this.$emit("delete",this.index); //子组件向外触发事件 index传给父组件
}
}
}
var app=new Vue({
el:'#root',
//2.注册局部组件 到 Vue实例中
components:{
TodoItem:TodoItem
},
data:{
list: [],
inputValue:''
},
methods:{
handleBtnClick:function () {
this.list.push(this.inputValue)
this.inputValue='';
},
handleItemDelete:function(index){
alert(index);
this.list.splice(index,1);//从哪个位置删除1个元素
}
}
});
</script>
</body>
更多推荐
已为社区贡献9条内容
所有评论(0)