Vue入门 this
Vue入门:: this.$emit:Vue父子组件传值(子父之间的通信)和splice()方法的用法
vue中子组件跟父组件通信需要使用this.$emit(),我们先来回顾一下,父组件和子组件的通讯使用什么呢?
a.父组件向子组件传值：通过v-bind:的形式进行数据的传递(可直接简写为冒号) 然后子组件 使用props来接收
如:
// 父组件
<todo-item v-bind:item="item"
v-bind:index="index"
v-for="(item,index) in list"></todo-item>
// 子组件
var TodoItemValue = {
props: ['item','index'],// 'item','index'就是父组件通过v-bind向子组件传递的
template:"<li>{{item}}{{index}}</li>"
}
b.子组件向父组件传值? 这个时候就需要用到this.$emit()方法了
子组件向父组件传值,基本流程如下:
1.先在子组件中定义一个事件@click='itemClick'
template:"<li @click='itemClick'>{{item}}"
// 这部分就是实际的子组件,注意里面现在定义了一个itemClick点击事件,这个事件的响应实现,是在自定义组件的methods中实现的
// methods就是实现子组件定义的点击事件,如itemClick
,methods:{
itemClick:function(){
this.$emit("delete",this.index);
}
}
var TodoItemValue = {
props: ['item','index'],
// 这部分就是实际的子组件,注意里面现在定义了一个itemClick点击事件,这个事件的响应实现,是在自定义组件的methods中实现的
template:"<li @click='itemClick'>{{item}}</li>"
// methods就是实现子组件定义的点击事件,如itemClick
,methods:{
itemClick:function(){
this.$emit("delete",this.index);
}
}
}
2.在自定义组件的子组件响应事件中通过this.$emit方法(this.$emit("delete",this.index))向父组件传递数据
this.$emit方法 - this.$emit("delete",this.index)
delete:$emit向父组件注册的事件delete
通过this.$emit会传递子组件的参数并相应触发父组件定义的$emit注册的事件delete
itemClick:function(){
this.$emit("delete",this.index);
}
Tips: this.index:就是传递的数据,注意这个子组件的index值同样是要先定义在props中,并用于获取html中的值
3.在父组件中注册通过emit定义事件
子组件通过this.$emit()触发并传递子组件参数,可以这个触发父组件哪里呢?所以我们需要在父组件相应定义并绑定一个事件delete来响应this.$emit("delete"),必须同名哦!
v-on:delete="handleItemClick"
其中delete是子组件向父组件注册的通讯事件,而handleItemClick则是父组件的响应通讯事件的实际处理事件,里面可以接收子组件传递的值
<todo-item v-bind:item="item"
:index="index"
//v-on:delete就是响应子组件绑定的事件,然后立即给出响应后的处理事件handleItemClick,这个就需要在父组件的methods方法具体实现了
v-on:delete="handleItemClick"
v-for="(item,index) in list"></todo-item>
4.通过父组件注册事件获取数据
handleItemClick则是父组件的响应通讯事件的实际处理事件,里面可以接收子组件传递的值
我们在父组件的methods中实现注册的响应事件handleItemClick,index就是子组件传递的数据
methods:{
handleItemClick: function(index){
alert('父组件响应事件'+index); // 方法中的index就是接受子组件传递数据
}
}
5 完整示例代码(实例):
点击页面的li标记后,会将当前的点击li值从组件中删除,这样页面就实现了点击某个元素后自行删除的效果(因为VUE是数据层面的操作,所以看不到我们通过js操作dom的写法,它直接从数据层删除了)
5-1 splice()方法
知识扩展:删除,我们只需要知道列表数组的下标就行了,在本处,父组件接收的就是列表的下标,然后删除的方法,我们使用了splice(),它会实际的改变数据的原值.
Vue中splice的使用：
splice( index, len, [item]) 用来删除/替换/添加数组内某一个或者几个值（该方法会改变原始数组）。
参数：index：数组开始下标
len：替换/删除的长度
item：替换的值，删除操作的话item为空
//删除
//删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)
// var arr=['a','b','c','d']
// arr.splice(1,1)
// console.log(arr) //["a", "c", "d"]
//删除起始下标为1，长度为2的一个值(len设置2)
// var arr2=['a','b','c','d']
// arr2.splice(1,2)
// console.log(arr2) //['a','d']
//替换
//替换起始下标为1，长度为1的一个值为"ttt",len设置的1
// var arr2=['a','b','c','d']
// arr2.splice(1,1,'ccc')
// console.log(arr2) //['a', 'ccc', 'c', 'd']
//替换起始下标为1，长度为2的两个值为‘ttt’
// var arr2=['a','b','c','d']
// arr2.splice(1,2,'ccc')
// console.log(arr2) //['a', 'ccc', 'd']
//添加
//在下标为1处添加一项'ttt'
var arr2=['a','b','c','d']
arr2.splice(1,0,'ccc')
console.log(arr2) //['a', 'ccc', 'b', 'c', 'd']
5-2 代码实例
<!DOCTYPE html>
<html>
<head>
<title>TODO LIST</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<input v-on:click="handleBtn" type="button" value="提交">
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-bind:item="item"
:index="index"
v-on:delete="handleItemClick" // 子组件向父组件通讯事件绑定及通讯事件的处理事件
v-for="(item,index) in list"></todo-item>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
// 局部组件
var TodoItemValue = {
props: ['item','index'],// 和全局组件一样,props中的属性值是html的v-bind中绑定的
template:"<li @click='itemClick'>{{item}}</li>"// 定义子组件点击事件
,methods:{
itemClick:function(){//子组件点击响应事件
this.$emit("delete",this.index);//通过emit向父组件注册通讯事件并传递参数index
}
}
}
var app = new Vue({
el:"#app",
// 注册局部组件
components:{
TodoItem:TodoItemValue // components第一个值TodoItem是html中使用的标签组件名,第二个TodoItemValue则是局部组件声明对象名
},
data:{
list:["第一课的内容","第二课的内容"]
,inputValue:''
},
// 响应事件要定义在vue的methods方法中
methods:{
handleBtn: function(){
this.list.push(this.inputValue);// 获取当前实例-app,data下的inputValue值,通过this即可
this.inputValue = ''; // 点击后清空v-model绑定的输入框
}
,handleItemClick: function(index){//响应子组件向父组件通讯处理事件
// alert('父组件响应事件'+index);
this.list.splice(index,1);
}
}
})
</script>
